/* ******* RESET ******* */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;vertical-align:top}html,body{/* height:100% */}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}link,a,a:visited{color:inherit;text-decoration:none}.clearfix{clear:both;width:100%;height:0;visibility:hidden;}textarea{line-height: 1.1;resize:none;}img{max-width:99%;}
sup{margin-left: 3px;font-size: .65em;}
/* *** ROOT VARIABLES ******* */
:root {
--main-width: 900px;
--main-red: #C8102E;
--main-red-rgb: 200, 16, 46;
--main-red-compl: #37efd1;
--main-blue: #012169;
--main-blue-rgb: 1, 33, 105;
--main-blue-compl: #fede96;
--main-blue-compl-rgb: 254, 222, 150;
--main-yellow: #fbd805;
--main-gray: #444;
--title-font: 'gochi Hand';
--calendars-font: 'comic-sans';
--bg-titre-rubrique: url('/assets/images/bg_titre_rubrique.svg');
--bg-stabylo: url('/assets/images/bg_stabylo.svg');
--bg-pinceau: url('/assets/images/bg_pinceau.svg');
--lundi-color: 255 ,215, 0;
--mardi-color: 138, 177, 255;
--mercredi-color: 255, 158, 158;
--jeudi-color: 171, 180, 189;
--vendredi-color: 255, 165, 0;
--samedi-color: 135,206,235;
}
/* *** FONTS ******* */
@font-face {
font-family: 'inkfree';
src: url('../fonts/inkfree/inkfree-webfont.woff2') format('woff2'),
url('../fonts/inkfree/inkfree-webfont.woff') format('woff');
}
@font-face {
font-family: 'gochi Hand';
src: url('../fonts/gochihand/gochihand-regular-webfont.woff2') format('woff2'),
url('../fonts/gochihand/gochihand-regular-webfont.woff') format('woff');
}
@font-face {
font-family: 'caveatBrush';
src: url('../fonts/caveat-brush/CaveatBrushRegular.woff2') format('woff2'),
url('../fonts/caveat-brush/CaveatBrushRegular.woff') format('woff');
}
@font-face {
font-family: 'comic-sans';
src: url('../fonts/comic-sans-ms/comic-sans.woff2') format('woff2'),
url('../fonts/comic-sans-ms/comic-sans.woff') format('woff');
}
/* *** CUSTOMS CLASS *******
*/
.hide { display: none; }
.show { display: block; }
.inline-block { display: inline-block; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.lineheight-1 { line-height: 1; }
.no-wrap { white-space: nowrap; }
.fontsize-small {font-size: .85em;}
.fontsize-large {font-size: 1.15em;line-height: 1;}
.fontsize-32 {font-size: 32px;line-height: 1;}
.opacity-75 { opacity: .75; }
.margin-right-4 {margin-right: 4px !important;}
.margin-right-8 {margin-right: 8px !important;}
.margin-top-16 {margin-top: 16px !important;}
.margin-top-24 {margin-top: 24px !important;}
.margin-top-32 {margin-top: 32px !important;}
.margin-bottom-4 {margin-bottom: 4px !important;}
.margin-bottom-8 {margin-bottom: 8px !important;}
.margin-bottom-16 {margin-bottom: 16px !important;}
.margin-bottom-24 {margin-bottom: 24px !important;}
.margin-bottom-32 {margin-bottom: 32px !important;}
.padding-top-16 {padding-top: 16px !important;}
.padding-bottom-16 {padding-bottom: 16px !important;}
.cursor-pointer { cursor: pointer; }
.in-middle-h { position: relative;left: 50%;transform: translateX(-50%); }
.in-middle-v {position: relative;top: 50%;transform: translateY(-50%); }
.overflow-hidden { overflow: hidden !important; }
.row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-center { display: flex;justify-content: center;align-items: center; }
.hilite-hover:hover,.hilite-hover-brightness:hover { filter: brightness(150%); }
.hilite-hover-contrast:hover { filter: contrast(130%); }
.main-red { color: var(--main-red); }
.arrow-down:after { content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2013.764%2016.443%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23C8102E%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.557.63c.181%202.738-.594%205.96-.086%208.572%202.348-1.607%203.895-5.067%204.693-4.008%201.467%201.987.526%202.096-5.983%2010.837-.689.925-1.485.103-1.937-.622-1.58-2.535-3.159-5.07-4.663-7.649-.696-1.193-.95-2.516.296-3.517.908-.73%201.596.472%202.693%202.069.361.525.98%201.637%201.772%202.859.262-2.51-.158-7.419-.069-8.393C5.328.181%208.479-.55%208.557.63z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);display: inline-block;width: .75em;height: .9em;position: relative;top: 5px; }
.arrow-up:after { content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2013.764%2016.443%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23C8102E%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.208%2015.813c-.182-2.737.594-5.959.086-8.571C2.946%208.849%201.399%2012.309.601%2011.25-.866%209.262.074%209.153%206.584.412c.689-.925%201.485-.103%201.937.622%201.58%202.535%203.159%205.07%204.663%207.649.696%201.193.95%202.516-.296%203.517-.908.729-1.596-.472-2.693-2.069-.361-.525-.98-1.637-1.772-2.859-.262%202.51.158%207.419.069%208.393-.055.597-3.206%201.328-3.284.148z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);display: inline-block;width: .78em;height: .9em;position: relative;top: 5px; }
.mobile-only { display: none; }
.desktop-only { display: initial; }
@media only screen and (max-width: 580px) {
.mobile-only { display: initial !important; }
.desktop-only { display: none !important; }
}
.graphic-separ {
position: relative;
height: 1.3rem; width: auto;
margin: auto;
background: #fff url(/assets/images/graphic-separ-filets.svg) no-repeat center center /contain;
}
/* *** NAV BAR sticky *********** */
#navbar-container {
position: relative;
top: 20px; left: 0;
width: 100%; height: 60px;
/* background-color: rgba(228,136,150, 0); */
background-color: rgba(208,51,77, 0);
transition: background-color .15s;
z-index: 1;
}
.stickyBar header { margin-bottom: 60px; }
.stickyBar #navbar-container {
/* on SCROLL */
position: fixed;
background-color: rgba(208,51,77, 1);
border-bottom: 1px solid rgba(255,255,255, 0.55);
top: 0; bottom: initial;
z-index: 1;
}
.stickyBar #navbar-container #navbar {
background-image: url(/assets/images/logo.svg), url(/assets/images/flag-coin.svg); /* logo, flag */
background-repeat: no-repeat, no-repeat;
background-position: 85px center, left center;
background-size: 200px, 30%;
}
@media only screen and (max-width: 680px) {
.index #navbar-container { /* top: 0; */ }
.stickyBar #navbar-container #navbar {
background-image: url(/assets/images/logo-smiley.svg);
background-position: 16px center;
background-size: contain;
}
}
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: var(--main-width);
max-width: 100%;
margin: auto;
padding: 8px 20px;
box-sizing: border-box;
}
#breadcrumb, #breadcrumb ul, #main-menu-wrapper, .dummy {
display: flex;
}
#main-menu-wrapper, .dummy {
width: 100%;
}
#breadcrumb {
justify-content: center;
align-items: start;
}
.stickyBar #breadcrumb {
align-items: end;
}
#breadcrumb h4 {
letter-spacing: 1px;
font: bold 0.9rem/1.7 "gochi Hand";
color: black;
}
.stickyBar #breadcrumb h4 {
color: rgba(255,255,255, .7);
}
#breadcrumb ul li:not(:last-child) {
margin-right: 6px;
}
#breadcrumb ul li > a {
display: block;
width: 1.3rem;
font: 1.65rem/1 var(--title-font);
text-align: center;
color: var(--main-blue);
background: url(/assets/images/bg-num-page.svg) no-repeat;
background-size: cover;
background-position: top left;
}
#breadcrumb ul li.active > a {
color: var(--main-red);
background-position: top right;
}
#main-menu-wrapper {
justify-content: end;
}
#button-menu, #button-back-to-top {
width: 1.55rem;
height: 1.55rem;
border: none;
border-radius: 50%;
box-shadow: 0 0 4px white;
cursor: pointer;
background: url(/assets/images/btns-sprite.svg) no-repeat;
}
#button-menu {
position: relative;
background-size: 215%;
background-position: 8px center;
background-color: var(--main-red);
/* background-color: rgba(var(--main-red-rgb), .7); */
}
.stickyBar #button-menu:after {
color: rgba(255,255,255, .7);
}
#screen-bottom-container {
position: sticky; /* fixed */
display: flex;
justify-content: flex-end;
left: 0; right: 0;
bottom: 15px;
width: var(--main-width);
max-width: 100%;
height: 1.8rem;
margin: 0 auto;
padding: 0 8px;
box-sizing: border-box;
/* border: 2px solid tomato; */
}
#button-back-to-top {
/* display: none; */
opacity: 0;
/* position: fixed;
right: 30px; bottom: 15px; */
width: 1.8rem;
height: 1.8rem;
background-size: 225%;
background-position: -32px center;
/* background-color: rgba(var(--main-red-rgb), .7); */
background-color: #d0334d;
transition: opacity .5s;
animation: move-up-down 1s infinite alternate;
animation-play-state: paused;
pointer-events: none;
}
#button-back-to-top:after {
content: "";
position: absolute;
left: -2px; top: -2px;
right: -2px; bottom: -2px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid white;
opacity: .75;
}
@keyframes move-up-down {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
@keyframes pulse {
0% { transform: scale(1.25); }
70% { transform: scale(1); }
100% { transform: scale(1.25); }
}
.stickyBar #button-back-to-top {
animation-play-state: running;
pointer-events: auto;
opacity: 1;
}
.scroll-target, .scroll-target * {
color: teal !important;
}
#main-menu-wrapper {
position: relative;
}
#main-menu-wrapper #menu-container {
display: none;
position: absolute;
top: 100%; right: 0;
padding-bottom: 16px; /* => +16px pour scrollIntoView() */
}
#main-menu {
/* display: none;
position: absolute;
top: 100%; right: 0; */
min-width: 100px;
background: white;
padding: 12px 18px;
text-align: left;
list-style: none;
box-shadow: 0 0 5px rgba(var(--main-blue-rgb), .5);
z-index: 10;
}
#main-menu li {
line-height: 1.15;
/* white-space: nowrap; */
cursor: pointer;
}
#main-menu li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
#main-menu li:hover {
/* background: #eee; */
background: rgba(var(--main-blue-rgb), 0.05);
}
#main-menu a {
display: block;
padding: 5px 3px;
white-space: nowrap;
}
#main-menu li a.active {
background: rgba(255, 239, 213, 0.7);
/* background: rgba(var(--main-red-rgb), 0.075); */
}
/* #main-menu li a.active:before {
content: "\2605";
margin-right: 3px;
color: rgba(var(--main-blue-rgb), .75);
} */
#main-menu h4 {
position: relative;
left: -4px;
font-size: .9rem;
font-weight: bold;
line-height: 1;
color: var(--main-red);
}
#main-menu h4:not(:first-child) {
margin-top: 10px;
}
#button-menu:after {
content: "MENU";
position: absolute;
letter-spacing: 1px;
font: bold 0.85rem/1.15 "gochi Hand";
color: black;
}
@media only screen and (min-width: 800px) {
#button-menu:after {
top: 25%; right: 48px;
}
}
@media only screen and (max-width: 800px) {
#button-menu:after {
top: 100%;
left: -20px; right: -20px;
font-size: 16px;
}
}
@media only screen and (max-width: 580px) {
#navbar-container {
/* bottom: -20px; */
}
}
/* **************************** */
html, body {
font: bold 24px/1.25 inkfree, sans-serif;
}
body {
width: 100%;
background-color: white;
background-image: url(/assets/images/body_motif_20pc.png);
background-repeat: repeat;
background-attachment: fixed;
background-size: 500px auto !important;
/* background-size: 35%; */
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--title-font);
font-weight: normal;
color: var(--main-gray);
}
h2:not(.titre-section) { font-size: 1.5rem;line-height: 1; }
@media only screen and (max-width: 400px) {
.simple-popup-content .title { font-size: 1.2rem !important; }
}
body,nav,.index header,#main-wrapper,#social-icons { box-sizing: border-box; }
i[class^=icon-php] { display: inline-block;line-height: 0.75; }
.icon-php.email svg { height: .7em;}
article .texte strong {
position: relative;
background: var(--bg-stabylo);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 90%;
text-decoration: none;
}
article[data-section="activites-proposees"] .texte strong,
div[data-section="activites-proposees"] article .texte strong {
color: var(--main-red);
background: none;
}
/* NAV -> Autres pages que Index */
nav {
/* position: absolute;
left: 0; top: 0; */
position: sticky;
top: 0;
max-width: 100%;
margin: auto;
padding: 10px 25px 0;
background: white;
z-index: 12;
}
#nav-wrapper {
width: 100%;
max-width: var(--main-width);
margin: auto;
}
nav .btn[title$=Retour] i svg {
fill: orangered;
}
nav .btn[title="Nouveau mot de passe"] i svg {
margin-left: 8px;
fill: darkslategray;
}
nav .btn > span {
position: relative;
top: 2px;
}
section {
min-height: 200px;
/* margin-top: 90px; */
margin-top: 50px;
}
#header-wrapper {
position: relative;
background-color: white;
background-image: linear-gradient(to bottom, rgba(var(--main-red-rgb), .5), transparent);
}
/* #header-wrapper.test-header-flag {
background-image: linear-gradient(to bottom, rgba(var(--main-blue-rgb), 1), transparent) !important;
} */
header, #main-wrapper {
width: var(--main-width);
margin: auto;
}
header {
position: relative;
width: 100%;
text-align: center;
/* background: url(/assets/images/flag-coin.svg) no-repeat left top; */
/* background-size: 35%; */
background: url(/assets/images/header-flag.png) no-repeat left top !important;
background-size: 80% !important;
background-position: 0 0;
}
header img[src$="logo.svg"] {
width: 65%;
max-height: 170px;
justify-self: flex-end;
align-self: center;
position: relative;
margin: 5px 5px 0 0;
/* top: -6px; */
}
header img[src$="region_Grand_Est.svg"] {
height: auto;
width: 140px;
max-width: 42vw;
margin-right: 40px;
}
header #visuel-right {
position: relative;
top: 10px;
/* width: calc(var(--main-width) + 120px); */
width: calc(var(--main-width) + 50px);
max-width: 100%;
height: 1px;
margin: auto;
display: flex;
justify-content: flex-end;
align-items: self-end;
}
header #visuel-right > img {
/* position: relative;
right: -30px; bottom: 0; */
height: 210px;
}
@media only screen and (max-width: 799px) {
/* header #visuel-right > img { display: none; } */
header #visuel-right { display: block;height: auto;}
#social-icons { /* justify-content: center !important; */}
}
#main-wrapper {
position: relative;
max-width: 100%;
/* padding: 20px; */
overflow: hidden;
color: #000;
background: white;
}
h1.main-title {
margin-right: 0;
padding-left: 0;
font-weight: bold;
/* line-height: .85; */
line-height: 1;
/* font-variant: small-caps; */
text-transform: uppercase;
}
h1.main-title > span {
font-size: 1.75rem;
letter-spacing: .1mm;
color: var(--main-blue);
}
h1.main-title small {
display: block;
font-size: 0.7em;
}
#social-icons {
display: flex;
justify-content: center;
align-items: center;
width: var(--main-width);
max-width: 100%;
/* height: 30px; */
margin: 18px auto 0;
padding: 3px 20px;
}
#social-icons > a { margin-left: 7px; }
@media only screen and (min-width: 581px) {
h1.main-title small { margin-left: 310px; }
}
@media only screen and (max-width: 580px) {
body { background-image: none; }
header img[src$="logo.svg"] { width: 90%; }
h1.main-title { padding-left: 0; }
h1.main-title > span { font-size: 1rem; }
h1.main-title small { margin-left: 100px; }
nav { padding: 4px 5px 0; }
nav .btn { font-size: 1rem; }
}
main {
min-height: 400px;
}
footer {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 120px;
background: url(/assets/images/school-bus-profil.png) repeat-x;
background-size: contain;
background-position: center 3px;
/* background-color: rgba(var(--main-blue-rgb), .10); */
}
footer .col {
position: relative;
left: -12px;
display: flex;
flex-direction: column;
align-items: center;
transform: rotate(-4deg);
margin-bottom: 7px;
}
footer .etiquette {
font-size: .85rem;
font-weight: bold;
text-align: center;
padding: 4px 14px;
margin: 2px 0;
/* letter-spacing: 0.075em; */
line-height: 1;
color: black;
background: var(--main-yellow);
border: 1px solid;
border-radius: 3px;
}
img.email, img.phone {
display: inline-block;
vertical-align: middle;
}
img.email { width: 10rem; }
img.phone { width: 6.7rem; }
/* PAGES
------------------ */
section.index-content, section#avis, section#tarifs {
padding: 0 90px;
}
/* INDEX Articles */
.index-content .item_content {
display: flex;
align-items: center;
}
.index-content .item_content .text-wrapper .titre {
margin-bottom: .25em;
font-size: 1.5rem;
line-height: 1;
}
.index-content .item_content:not(.titre-rubrique) { margin-bottom: 40px; }
.index-content .item_content.titre-rubrique { margin-bottom: 15px; }
.index #items .article:not(.accordeon-wrapper .article):first-child .texte:first-letter {
/* Lettrine */
float: left;
font-size: 3em;
line-height: .75;
padding-right: 8px;
}
.index-content .item_content > .image {
/* flex: 1; */
min-height: 60px;
margin-right: 12px;
text-align: center;
}
.index-content .item_content.row-reverse > .image {
margin-left: 12px;
margin-right: 0;
}
.index-content .item_content > .image img {
max-height: none;
max-width: none;
}
.titre-section {
width: 100%;
text-align: center;
line-height: 1.025;
margin-bottom: 15px;
}
.titre-section > span {
display: inline-block;
font-size: 1.85em;
line-height: .85;
color: rgba(var(--main-red-rgb), .7);
background: var(--bg-titre-rubrique);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 90%;
}
.accordeon-wrapper {
display: none;
margin-bottom: 30px;
border-left: 2px solid rgba(var(--main-red-rgb), .25);
}
.read-more-btn {
display: block;
margin-right: 30px;
text-align: right;
color: var(--main-red);
cursor: pointer;
}
.link-to-tarifs {
display: flex;
position: relative;
top: -20px;
font: 1.05em/1 var(--title-font), sans-serif;
justify-content: right;
color: slategray;
/* border: 1px solid #ccc; */
cursor: pointer;
}
.link-to-tarifs > a {
border-bottom: 1px solid;
}
.link-to-tarifs > svg { width: 1.25em;height: auto; }
@media only screen and (min-width: 581px) {
#main-wrapper { margin-bottom: 50px; }
#social-icons a svg { width: 1.55rem;height: auto; }
.index-content .item_content:not(.row-reverse) > .image { margin-right: 30px; }
.accordeon-wrapper { padding-left: 30px; }
.index-content .item_content > .text-wrapper .texte img:not(.email):not(.phone) { display: none; } /* IMAGE version mobile/portrait => masquée */
}
@media only screen and (max-width: 580px) {
#main-wrapper { /* margin-bottom: 30px; */ }
section.index-content, section#avis, section#tarifs { padding: 0 20px; }
.index-content .item_content { flex-direction: column; }
.index-content .item_content > .image { display: none; } /* IMAGE version desktop => masquée */
.accordeon-wrapper { padding: 12px; }
/* IMAGE version mobile/portrait */
.index-content .item_content > .text-wrapper .texte:has(img) {
hyphens: auto !important;
}
.index-content .item_content > .text-wrapper .texte img:not(.email) {
float: left;
margin-right: 12px;
}
.index-content .item_content.row-reverse > .text-wrapper .texte img:not(.email):not(.phone) {
float: right;
margin-right: 0;
margin-left: 5px;
}
}
/* LINKS 2 PDFS */
section#links_2_pdfs {
padding: 0 90px 50px;
}
#links-wrapper {
position: relative;
padding: 20px 40px;
/* background: rgba(112,128,144, .2); */ /* slategray */
background: rgba(var(--main-blue-rgb), .035);
border: 2px dotted var(--main-blue);
}
#links-wrapper #links h3.categorie,
#admin #pdf-files h3.categorie {
font-size: 1.35em;
color: rgba(var(--main-red-rgb), .7);
}
#links-wrapper #links h3.categorie:before,
#admin #pdf-files h3.categorie:before {
content: "● ";
}
#links-wrapper li {
padding: 2px 0;
/* border-bottom: 1px solid #ccc; */
}
#links-wrapper li + li {
border-top: 1px solid rgba(var(--main-blue-rgb), 0.15);
}
#links-wrapper li:last-child {
border-bottom: none;
}
/* #links-wrapper li > a { */
#links-wrapper h2, #links-wrapper h3.categorie,
#admin #pdf-files h3.categorie {
font-family: 'caveatBrush';
font-weight: normal;
}
#links-wrapper h2 { font-size: 1.5rem;line-height: .85; }
@media only screen and (max-width: 580px) {
section#links_2_pdfs { padding: 0 20px 50px; }
}
/* AVIS */
#avis {
margin: 40px 0 50px;
}
#avis .ardoise-btn {
position: relative;
left: 50%;
display: inline-block;
transform: translateX(-50%);
padding-top: 16px;
text-align: center;
}
#avis a.open-popup-avis {
display: inline-flex;
justify-content: center;
align-items: center;
width: 200px; height: 150px;
transform: rotate(-5deg);
background: url(/assets/images/ardoise.png) no-repeat;
background-size: contain;
font-family: var(--title-font);
font-size: 28px;
color: white;
cursor: pointer;
}
#avis #lightSlider {
min-height: 210px;
font: italic .85rem Arial, Helvetica, sans-serif;
}
/* ------ */
#tarifs-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#tarifs-wrapper .tarif-container {
position: relative;
width: 270px; height: auto;
margin: 0 2px;
padding: 36px 32px 40px;
box-sizing: border-box;
transform: rotate(-2deg);
}
#tarifs-wrapper .tarif-container {
background-image: url(/assets/images/ardoises/ardoise-1[top].png),
url(/assets/images/ardoises/ardoise-1[bottom].png),
url(/assets/images/ardoises/ardoise-1[middle].png);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: top center, bottom center, center 23px; /* 23px => hauteur top */
background-size: contain, contain, 100% calc(100% - 100px); /* 100px => hauteur bottom */
}
#tarifs-wrapper .tarif-container:nth-child(even) {
background-image: url(/assets/images/ardoises/ardoise-2[top].png),
url(/assets/images/ardoises/ardoise-2[bottom].png),
url(/assets/images/ardoises/ardoise-2[middle].png);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: top center, bottom center, center 22px; /* 22px => hauteur top */
background-size: contain, contain, 100% calc(100% - 99px); /* 99px => hauteur bottom */
}
#tarifs-wrapper .tarif-container .tarif-content {
height: 100%;
min-height: 40px;
font-size: .95em;
line-height: 1.15;
text-align: center;
hyphens: auto;
color: white;
overflow: hidden;
}
/* ------ */
.index #calendars {
margin-bottom: 40px;
}
@supports (selector(:has(*))) {
/* *** si :has est supporté *** */
.index #calendars h2:has(+ p.admin-infos:empty) {
margin-bottom: 32px !important;
}
}
.index #avis h2, .index #calendars h2, .page2 #tarifs h2 {
font-size: 1.85em;
line-height: 1.1;
margin-top: 0;
margin-bottom: 30px;
color: var(--main-blue);
}
#avis h2 svg, #calendars h2 svg, #tarifs h2 svg {
display: inline-block;
height: 1em; width: auto;
opacity: 0.7;
}
#tarifs h2 svg {
height: 1.15em;
}
#avis .lightSlider li iframe {
display: block;
margin: 0 auto;
}
#avis .lightSlider li.lslide > span {
display: block;
max-width: 500px;
margin: auto;
}
#avis .lightSlider li.lslide > span.short-text {
/* Restriction pour texte < 50 signes (classe ajoutée dans 'avis.php') */
max-width: 400px;
hyphens: auto;
}
#avis .lightSlider li.lslide[data-type="text"] > span:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23d0334d' d='M8.4 6.2a1 1 0 0 1 1.2 1.6c-1.564 1.173-2.46 2.314-2.973 3.31A3.5 3.5 0 1 1 4 14.558a7.6 7.6 0 0 1 .508-3.614C5.105 9.438 6.272 7.796 8.4 6.2m9 0a1 1 0 0 1 1.2 1.6c-1.564 1.173-2.46 2.314-2.973 3.31A3.5 3.5 0 1 1 13 14.558a7.6 7.6 0 0 1 .508-3.614c.598-1.506 1.764-3.148 3.892-4.744'/%3E%3C/g%3E%3C/svg%3E");
}
#avis .lightSlider li.lslide[data-type="text"] > span:after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23d0334d' d='M16.5 6A3.5 3.5 0 0 1 20 9.442c.09.865.077 2.141-.508 3.614c-.598 1.506-1.764 3.148-3.892 4.744a1 1 0 1 1-1.2-1.6c1.564-1.173 2.46-2.313 2.973-3.31A3.5 3.5 0 1 1 16.5 6m-9 0A3.5 3.5 0 0 1 11 9.442c.09.865.077 2.141-.508 3.614c-.597 1.506-1.764 3.148-3.892 4.744a1 1 0 1 1-1.2-1.6c1.564-1.173 2.46-2.313 2.973-3.31A3.5 3.5 0 1 1 7.5 6'/%3E%3C/g%3E%3C/svg%3E");
}
/* CALENDAR */
#calendar-school .lightSlider li.lslide {
box-sizing: border-box;
width: 150px; height: 100px;
text-align: center;
border: 1px solid gray;
}
/* INFOS ADMIN */
body:not(.admin) .admin-infos:empty {
display: none;
}
#calendars .admin-infos {
font-size: .85rem;
max-width: 500px;
width: 88%;
margin: 0 auto 25px;
hyphens: auto;
}
.admin-infos.with-picto {
position: relative;
box-sizing: border-box;
padding-left: 60px;
}
.admin-infos.with-picto:before {
content: "";
position: absolute;
left: 0; top: 0;
width: 60px; height: 45px;
background: url(/assets/images/buste-girl.png) no-repeat;
background-size: contain;
}
/* MENTIONS LÉGALES */
section#mentions-legales { font: normal .75rem comic-sans, sans-serif;color: #777;margin-top: 0;padding: 0 100px 70px; }
#mentions-legales h1 { font-size: 1.85rem;line-height: 1; }
#mentions-legales h2 { margin: 30px 0 10px; }
#mentions-legales a { text-decoration: underline;text-decoration-style: dotted;text-decoration-color: #999; }
@media only screen and (max-width: 580px) {
section#mentions-legales { padding: 0 20px 70px; }
}
#copyright {
font: .55rem comic-sans;
text-align: center;
margin-bottom: 30px;
}
#copyright > span {
position: relative;
display: inline-flex;
align-items: center;
}
#copyright > span:before {
content: "";
position: absolute;
left: 30px; right: 30px;
top: -10px;
height: 1px;
background: #aaa;
}
#copyright > span a {
text-decoration: underline;
}
#copyright > span a img[alt="g-Creation Entreprise"] {
display: inline-block;
height: 1.25rem;width: auto;
}
#login {
position: fixed;
right: 0; bottom: 0;
width: 50px; height: 50px;
cursor: pointer;
background: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M50%2050H0L50%200z%22%2F%3E%3Cpath%20fill%3D%22%23E6E7E8%22%20d%3D%22M40.696%2032.834h-1.257V30.73h-.001a4.522%204.522%200%2000-9.043%200h-.001v2.104h-1.257a.506.506%200%2000-.503.504v7.036c0%20.275.227.502.503.502h11.56a.505.505%200%2000.503-.502v-7.036a.506.506%200%2000-.504-.504zm-8.544-2.105l.002.014a2.77%202.77%200%20012.762-2.744%202.77%202.77%200%20012.763%202.744l.002-.014v2.104h-5.528v-2.104zm4.451%206.467c0%201.444-.755%202.615-1.687%202.615-.931%200-1.686-1.171-1.686-2.615s.755-2.615%201.686-2.615c.932%200%201.687%201.171%201.687%202.615z%22%2F%3E%3C%2Fsvg%3E) no-repeat right bottom;
background-size: contain;
background-position: 50px 50px;
opacity: .65;
transition: all .25s;
}
#login:hover {
background-position: 0;
}
/* MOBILE CLASSES => index
*/
@media only screen and (max-width: 580px) {
.index header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
padding-top: 60px;
background-size: 160% !important;
/* border: 3px solid red; */
}
.index header > a {
/* margin-top: 60px; */
}
.index header img[data-platform="desktop"] {
display: none;
}
.index header img[data-platform="mobile"] {
display: block;
width: auto;
height: 210px;
}
.index header h1.main-title {
/* margin-top: 25px; */
padding: 25px 15px 0;
}
.index header h1.main-title > span {
font-size: 1.5em;
}
.index header #visuel-right {
height: auto;
position: initial;
width: auto;
margin: 0;
padding: 0;
}
body:not(.index) header #visuel-right {
display: none;
}
.index header #visuel-right > img {
display: block;
}
.index #social-icons {
width: auto; height: auto;
margin: 0;
width: 100%;
/* justify-content: center; */
}
.index #social-icons a:first-child {
margin: 0;
}
.index section.index-content {
margin-top: 1.5rem;
}
.index section.index-content .image img {
width: 70%; height: auto;
}
}
/* ---TABS nav
*/
.tabs {
}
.tabs-nav-wrapper {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
ul#tabs-nav {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 75%;
list-style: none;
}
ul#tabs-nav::after {
content: "";
position: absolute;
left: -20px;right: -20px;
bottom: 0;
border-bottom: 1px solid var(--main-blue);
}
ul#tabs-nav li {
position: relative;
bottom: -4px;
font: 1.15rem/1 var(--title-font);
text-align: center;
/* margin: 0 4px; */
padding: 3px 18px;
color: var(--main-blue);
cursor: pointer;
}
ul#tabs-nav li.active {
background: var(--bg-pinceau);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#tabs-nav li a {
white-space: pre;
text-decoration: none;
color: #FFF;
}
.tab-content {
}
.tabs .tab-content {
display: none;
}
#diaporama {
width: 700px;
max-width: 95%;
margin: auto;
}
#diaporama .lslide, #diaporama .clone {
display: flex;
justify-content: center;
position: relative;
text-align: center !important;
/* background: rgba(var(--main-blue-rgb), .75); */
}
#diaporama .lSAction {
padding: 10px 0;
}
/* Légendes */
#diaporama:before {
content: "";
display: block;
height: .7rem;
margin-bottom: 8px;
font: italic .7rem/1.15 comic-sans;
text-align: center;
color: var(--main-blue);
opacity: 1;
transition: opacity .25s;
}
#diaporama.before-slide:before { opacity: 0; } /* classe ajoutée par plugin (options d'instance) */
#diaporama.after-slide:before { opacity: 1; } /* classe ajoutée par plugin (options d'instance) */
#diaporama.after-slide:has(li.active img[src$="salle_cours.jpg"]):before {
content: "La salle d'activités";
}
#diaporama.after-slide:has(li.active img[src$="alfred.jpg"]):before {
content: "Alfred is watching you !";
}
#diaporama.after-slide:has(li.active img[src$="vitrine.jpg"]):before {
content: "5 rue Martin Waldseemuller Saint-Dié";
}