@font-face { font-family: "Bonzai"; src: url("fonts/bonzai.ttf"); }
@-ms-viewport{ width: device-width; }

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	position: relative;
	z-index: 0;
	font-weight: 500;
	font-family: "Outfit";
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6em;
}
html{
	overflow-x: hidden;
}
:root {
	--noir: #000000;
	--blanc: #FFFFFF;
	--beige: #fff1e1;
	--beige-fonce : #f1e5cf;
	--rouge : #ce2100;
	--rouge-fonce : #b01c00;
}

/* REGLAGES GLOBAUX */
/*==================*/
body{
	overflow-x: hidden;
}
h1, h2,h3,h4,h5{}
h1{
	font-family: "Bonzai";
	font-size: 5em;
}
h1 span.rouge,
h2 span.rouge{
	color: var(--rouge);
	font-family: "Bonzai";
	font-size: 1em;
}
h2{
	line-height: 1em;
}
h3{
	font-family: "Cabin";
	font-weight: 600;
	font-size: 1.6em;
	background-color: var(--rouge);
    color: var(--beige);
    display: inline-block;
    padding: 5px 20px 5px 20px;
    border-radius: 0 50px 50px 0;
    box-shadow: -100px 0 var(--rouge);
}
h4{
	font-family: "Cabin";
	font-weight: 600;
	font-size: 1.4em;
}
h5{}
p{
	margin-bottom: 15px;
}
a{
	color: var(--rouge);
}
a:hover{
	opacity: 1;
	color: var(--noir);
}
strong{
	font-weight: 600;
}
.ligne{
	display: flex;
}
.col-lg-3,
.col-md-6,
.col-sm-6,
.col-xs-12 {
	position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 1200px){
	.col-lg-3{
		width: 25%;
	}
}
@media (min-width: 992px) and (max-width: 1200px){
	.col-md-6 {
		width: 50%;
	}
}
@media (min-width: 768px) and (max-width: 992px) {
	.col-sm-6 {
		width: 50%;
	}
}
@media (max-width: 768px) {
	.col-xs-12 {
		width: 100%;
	}
}
.btn-file{
	display: inline-block;
    background-color: var(--rouge-fonce);
    margin-right: 20px;
    border-radius: 50px;
    padding: 10px 20px;
    color: var(--beige);
}
.btn-file i{
	font-size: 1.3em;
    color: var(--beige);
    top: 2px;
    margin-right: 10px;
}
.btn-file:hover{
	background-color: var(--beige-fonce);
	color: var(--rouge-fonce);
}
.btn-file:hover i{
	color: var(--rouge-fonce);
}

/* ENTÊTE */
/*==================*/
header{
	height: 100vh;
	width: 100%;
}

/* Carousel */
.swiper {
  width: 100%;
  height: 100vh;
}
.swiper .swiper-slide .img-bg-slide{
	position: absolute;
	height: auto;
	width: 100%;
}
.swiper .swiper-slide .img-bg-slide:after{
	content: "";
	display: block;
	background-color: rgba(255,255,255,0.8);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.swiper .swiper-slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.swiper .swiper-slide .slide-content:not(.not-bg){
	background-color: rgba(255,255,255,0.8);
    max-width: 800px;
    padding: 50px;
    text-align: center;
}
.swiper .swiper-slide .slide-content h2{
	font-size: 2em;
	text-align: center;
	line-height: 2em;
}
.swiper .swiper-slide .slide-content h2 .japan-language{
	font-size: 0.9em;
	font-weight: bold;
}
.swiper .swiper-slide .slide-content p{
	font-size: 1.3em;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
	color: var(--rouge);
}
.swiper .swiper-button-next{
	right: 30px;
	left: auto;
}
.swiper .swiper-button-prev{
	left: 30px;
	right: auto;
}
.swiper .swiper-pagination-bullet-active{
	background-color: var(--rouge);
}

/* MENU PRINCIPAL */
/*==================*/
nav.navbar{
	position: fixed;
    z-index: 9;
    padding: 0px 50px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    top: 0;
    background-color: transparent;
    margin: 0;
    transition: all 0.5s ease 0s;
	max-width: 100vw;
}
nav.navbar.menu-scroll{
	background-color: var(--beige);
}
nav.navbar a{
	text-decoration: none;
	list-style: none;
	color: var(--noir);
}
nav.navbar .logo{
	width: 20%;
    height: auto;
    max-width: 200px;
    display: inline-block;
    margin: auto;
    margin-bottom: 0;
}
nav.navbar .nav-links{
	text-align: center;
    margin-top: 0;
    transition: all 0.5s linear;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav.navbar .nav-links.mobile-menu{
	margin-top: 0;
}
nav.navbar .nav-links>ul {
	display: flex;
    justify-content: center;
    font-size: 0;
    list-style-type: none;
    background-color: var(--beige);
    box-shadow: 400px 0 var(--beige);
    border-radius: 50px;
}
nav.navbar .nav-links>ul>li{
	font-size: 1rem;
	z-index: 1;
	display: flex;
	align-items: center;
}
nav.navbar .nav-links ul li:hover{
	cursor: pointer;
}
nav.navbar .nav-links>ul>li>a {
    padding: 10px 45px;
    display: block;
	line-height: 1.3em;
}
nav.navbar .nav-links>ul>li>a:hover,
nav.navbar .nav-links>ul>li.active>a {
	color: var(--rouge);
}
nav.navbar .nav-links>ul>li>a i{
	position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
nav.navbar .nav-links .animation {
    content: url(images/icone-yokoso.svg);
    position: absolute;
    left: 5px;
    top: 50%;
    height: auto;
    display: block;
    width: 30px;
    transform: translateY(-50%);
	transition: all .5s ease 0s;
	z-index: 0;
}
nav.navbar .nav-links>ul>li:nth-child(1)>a{
	padding: 10px 20px 10px 50px;
}
nav.navbar .nav-links ul li ul{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: absolute;
	height: 0;
	background-color: var(--beige);
	width: 100%;
	top: 100%;
}
nav.navbar .nav-links ul li ul li{}
nav.navbar .nav-links ul li ul li a{
	padding: 10px 10px;
	display: block;
}
nav.navbar .nav-links ul li ul li a:hover{
	color: var(--rouge);
}
nav.navbar .nav-links ul li:hover ul{
	height: auto;
}
nav.navbar .icon-menu-mobile{
	display: none;
	position: absolute;
    top: 15px;
    right: 30px;
    font-size: 30px;
	z-index: 2;
}
nav.navbar .icon-menu-mobile:hover{
	cursor: pointer;
}


/* FOOTER */
/*==================*/
footer{
	background: url("images/background-footer.svg");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 50px 50px 10px 50px;
}
footer .footer-contenu{
	margin: auto;
	max-width: 1400px;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	gap: 40px;
	padding: 0px 0 50px 0;
}
footer .footer-contenu .column-1{
	width: 33%;
	text-align: center;
}
footer a.logo{
	display: block;
}
footer a.logo img{
	max-width: 400px;
}
footer .footer-contenu .column-1 .reseaux-sociaux{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
footer .footer-contenu .column-1 .reseaux-sociaux a{}
footer .footer-contenu .column-1 .reseaux-sociaux a img{
	width: 30px;
}
footer .footer-contenu .column-2{
	width: 34%;
}
footer .footer-contenu .column-2 ul{}
footer .footer-contenu .column-2 ul li{
	display: flex;
	align-items: center;
    justify-content: start;
    gap: 20px;
    margin-bottom: 20px;
}
footer .footer-contenu .column-2 ul li i{
	font-size: 2em;
    width: 35px;
    text-align: center;
}
footer .footer-contenu .column-2 ul li a{}
footer .footer-contenu #form-contact{
	display: flex;
    flex-direction: column;
    max-width: 30%;
    gap: 10px;
}
footer .footer-contenu .footer-links{
	width: 33%;
}
footer .footer-contenu .footer-links h5{
	font-weight: bold;
}
footer .footer-contenu .footer-links a{}
footer .footer-bottom{
	text-align: center;
	font-size: 0.8em;
}
footer .footer-bottom a{
	font-size: 1em;
}

/* CONTENU */
/*==================*/
section .section-contenu{
	max-width: 1500px;
	padding: 100px 50px 50px 50px;
	margin: auto;
}
section .section-contenu h2{
	font-family: "Bonzai";
	font-size: 4em;
	text-align: center;
}

/*----------------------------------*/
/*     Section Infos pratiques      */
/*----------------------------------*/
#infos-pratiques{
	background-color: var(--beige);
}

/* Tableau */
#tableau-tarifs{
	max-width: 1000px;
	margin: 30px auto;
}
#tableau-tarifs thead{
	z-index: 2;
}
#tableau-tarifs thead tr{}
#tableau-tarifs thead tr th {
  background: var(--rouge);
  height: 140px;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  vertical-align: top;
  width: 25%;
  border-right: 1px solid var(--beige-fonce);
  border-left: 1px solid var(--beige-fonce);
}
#tableau-tarifs thead tr th:nth-child(1){
	background-color: transparent;
	border-left: none;
}
#tableau-tarifs thead tr th > h4 {
  background: var(--rouge-fonce);
  font-size: 20px;
  padding: 5px 0;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
#tableau-tarifs thead tr th .nb-pers {
  position: absolute;
  bottom: -25px;
  background: var(--rouge-fonce);
  height: 95px;
  width: 95px;
  margin: 0 auto;
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: 50px;
  border: 5px solid #fff;
  line-height: 80px;
  font-size: 28px;
  font-weight: 700;
}
#tableau-tarifs thead tr th .nb-pers span {
  position: absolute;
  font-size: 9px;
  bottom: 25px;
  left: 28px;
  font-weight: 400;
}
#tableau-tarifs tbody{
	z-index: 1;
}
#tableau-tarifs tbody tr{}
#tableau-tarifs tbody tr td{
	padding: 5px 10px;
	background-color: var(--blanc);
	border-right: 1px solid var(--beige-fonce);
	border-left: 1px solid var(--beige-fonce);
	text-align: center;
}
#tableau-tarifs tbody tr td:nth-child(1){
	text-align: left;
}
#tableau-tarifs tbody tr:nth-child(4n + 1) td{
	background-color: var(--beige-fonce);
	font-weight: 600;
}
#tableau-tarifs tbody tr td span{
	font-size: 0.8em;
	color: var(--rouge-fonce);
	text-decoration: line-through;
	margin-left: 20px;
	position: absolute;
	top: 8px
}
#tableau-tarifs tfoot{}
#tableau-tarifs tfoot tr{}
#tableau-tarifs tfoot tr td{
	background-color: var(--beige-fonce);
	padding: 10px;
}
#tableau-tarifs tfoot tr td a{
	background-color: var(--rouge-fonce);
	color: var(--blanc);
	border-radius: 30px;
	padding: 8px 20px;
	display: block;
	font-size: 16px;
	font-weight: 600;
	max-width: 100px;
	text-align: center;
	margin: auto;
	text-transform: uppercase;
}

/* Conditions d'inscription */
#conditions-inscription{
	padding: 100px 0;
}
#conditions-inscription .infos{
	padding: 50px 20px;
}
#conditions-inscription p{
	margin-bottom: 50px;
}

/* Modes de paiement */
.mode-paiement{
	max-width: 500px;
	margin: auto;
	padding: 50px;
	background-color: var(--beige-fonce);
	color: var(--rouge-fonce);
}
.mode-paiement h4{
	font-weight: 600;
	font-size: 1.2em;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 30px;
}
.mode-paiement ul{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.mode-paiement ul li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mode-paiement ul li i{
	font-size : 2em;
}

.infos{
	padding: 20px 20px 0;
	display: flex;
	align-items: center;
	color: var(--rouge-fonce);
	justify-content: space-between;
}
.infos div{
	display: flex;
	align-items: center;
}
.infos img.chibi{
	max-width: 200px;
    margin-left: 50px;
    margin-top: -100px;
}
.infos p{
	margin-bottom: 0;
}
.infos i{
	font-size: 3em;
	color: var(--rouge-fonce);
	margin-right: 20px;
}
#horaires{
	padding: 100px 0;
}
#horaires h3 {
	margin-bottom: 20px;
}
.annulation-cours{
	background-color: var(--rouge-fonce);
	color: var(--blanc);
	padding: 50px;
	max-width: 900px;
	margin: auto;
}
.annulation-cours img.chibi{
	max-width: 200px;
    float: left;
    margin-right: 50px;
    margin-top: 13px;
}
.annulation-cours h4{
	text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.annulation-cours h4 i{
	font-size: 2em;
	margin-right: 20px;
}
.annulation-cours strong{
	font-size: 16px;
}
.annulation-cours ul{}
.annulation-cours ul li{
	list-style: disc;
	margin-left: 50px;
}


/*----------------------------------*/
/*          Section Yokoso          */
/*----------------------------------*/
#yokoso{
	background-color: var(--beige-fonce);
	z-index: 1;
}
#yokoso>.section-contenu{
	z-index: 1;
}
#yokoso-presentation{
	display: flex;
    gap: 20px;
    justify-content: center;
    align-items: start;
}
#yokoso-presentation::before{
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 500px;
    bottom: 0;
    left: -6%;
    background-image: url(./images/fond-branche-sakura.svg);
    opacity: 0.1;
	background-repeat: no-repeat;
}
#yokoso-presentation .presentation{
	width: 60%;
	padding-top: 30px;
}
#yokoso-presentation .presentation h3 {
	margin-bottom: 30px;
	margin-top: 30px;
}
#yokoso-presentation .presentation p{
	margin-bottom: 20px;
}
#yokoso-presentation .presentation ul{
	list-style: circle;
	padding-left: 30px;
}
#yokoso-presentation .presentation ul li{
	list-style: circle;
}
#yokoso-presentation .professeur{
	width: 40%;
    background-color: var(--rouge);
    padding: 20px;
    color: var(--blanc);
    border-radius: 50px;
	text-align: center;
}
#yokoso-presentation .professeur h3{
	text-align: center;
    box-shadow: none;
    display: block;
}
#yokoso-presentation .professeur img{
	width: 100%;
    clip-path: circle(48%);
    margin: auto;
    max-width: 300px;
}
#yokoso-presentation .professeur p{
	text-align: left;
}

#yokoso-ateliers{
	padding: 0px 0px 80px 0px;
	z-index: 1;
}
#yokoso-ateliers:before{
	content: url("images/icone-yokoso-blanc.svg");
	opacity: 0.5;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: auto;
    display: block;
    width: 70%;
}
#yokoso-ateliers h4{
	margin: 20px 0 20px 0;
	background-image: url("images/icone-yokoso-beige.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 35px;
	padding-left: 40px;
}
#yokoso-ateliers>.ligne{
	max-width: 800px;
	margin: auto;
    padding: 20px;
}
#yokoso-ateliers>.ligne>div{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	background-color: var(--beige);
}
#yokoso-ateliers>.ligne .japan-language{
	font-size: 2.5em;
}

/* GALERIE */
/*----------*/
.gallery {
	z-index: 1;
	margin-bottom: 50px;
}
.gallery .container{
	z-index: 1;
}
.gallery .img-wrapper {
	position: relative;
	margin-top: 15px;
}
.gallery .img-wrapper img {
	width: 100%;
}
.gallery .img-overlay {
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
}
.gallery .img-overlay i {
	color: #fff;
	font-size: 3em;
}
.gallery .overlay {
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	-webkit-user-select: none;
	-moz-user-select: none;    
	-ms-user-select: none; 
	user-select: none;
}
.gallery .overlay img {
	margin: 0;
	width: 70%;
	height: auto;
	max-height: 80%;
	object-fit: contain;
	padding: 10% 5% 5% 5%;
}
.gallery .nextButton {
	color: #fff;
	font-size: 2em;
	transition: opacity 0.8s;
}
.gallery .nextButton i {
	font-size: 1em;
}
.gallery .nextButton:hover {
	opacity: 0.7;
}
.gallery .prevButton {
	color: #fff;
	font-size: 2em;
	transition: opacity 0.8s;
}
.gallery .prevButton i {
	font-size: 1em;
}
.gallery .prevButton:hover {
	opacity: 0.7;
}
.gallery .exitButton {
	color: #fff;
	font-size: 2em;
	transition: opacity 0.8s;
	position: absolute;
	top: 100px;
	right: 20px;
}
.gallery .exitButton i{
	font-size: 1em;
}
.gallery .exitButton:hover {
	opacity: 0.7;
	cursor: pointer;
}

#yokoso-traduction{
	background-image: url(images/bordure.jpg);
    background-repeat: repeat-y;
    background-size: 30px;
    background-position: 0 0;
    background-color: var(--beige);
    border-top: 80px solid var(--beige-fonce);
    padding-top: 50px;
}
#yokoso-traduction .chibi{
	position: absolute;
    z-index: 2;
    top: -225px;
    right: 50%;
    width: 200px;
    transform: translateX(50%);
}
#yokoso-traduction .section-contenu{
	padding: 0 50px 50px 50px;
}
#yokoso-traduction h3{}
#yokoso-traduction h4{
	margin: 20px 0 20px 0;
	background-image: url("images/icone-yokoso.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 35px;
	padding-left: 40px;
}
#yokoso-traduction h5{ 
	font-weight: bold; 
}
#yokoso-traduction ul{
	padding-left: 30px;
}
#yokoso-traduction ul li{
	list-style: circle;
}
#yokoso-traduction .exemple{
	padding-left: 50px;
}

/*----------------------------------*/
/*      Section Partenaires         */
/*----------------------------------*/
#partenaires{
	background-color: var(--beige-fonce);
    padding-bottom: 100px;
    background-image: url(images/background-section.svg);
    background-attachment: fixed;
    background-size: 100%;
}
#partenaires p{
	margin-bottom: 50px;
}
#partenaires .chibi{
	position: absolute;
    z-index: 2;
    bottom: -100px;
    right: 5%;
    width: 200px;
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 1rem;
}
.grid > div {
	background: var(--blanc);
	padding: 1rem;
	display: grid;
	place-items: center;
}
.grid > div::before {
	content: "";
	display: block;
	padding-bottom: 100%;
	grid-area: 1/1/2/2;
}
.grid > div a{
	width: 100%;
    grid-area: 1/1/2/2;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.grid > div img {
	width: 100%;
}
.modal{
	position: fixed;
    background-color: var(--beige);
    height: auto;
    top: 15%;
    z-index: 9;
    width: 80%;
    left: 10%;
    height: 70%;
    overflow: auto;
	visibility: hidden;
}
.modal:before{
	content: "";
    position: fixed;
    z-index: 8;
    height: 100vh;
    width: 100vw;
    background-color: var(--noir);
    opacity: 0.5;
    top: 0;
    left: 0;
}
.modal .modal-content{
	z-index: 9;
    background-color: var(--beige);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.modal .modal-content .btn-close-modal{
	border: none;
    background: none;
    position: absolute;
    right: 10px;
    top: 10px;
}
.modal .modal-content .btn-close-modal:hover{
	cursor: pointer;
}
.modal .modal-content .btn-close-modal i{
	font-size: 2em;
}
.modal .modal-content img{
	max-width: 300px;
	margin-bottom: 20px;
}
.modal .modal-content p{
	text-align: center;
}
.modal .modal-content ul {
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
	gap: 30px;
    width: 60%;
    min-width: 730px;
}
.modal .modal-content ul li{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal .modal-content ul li i{
	font-size: 2em;
	margin-bottom: 10px;
}
.modal .modal-content ul li a{}

/*----------------------------------*/
/*    Section Préfecture Hyôgo      */
/*----------------------------------*/
#prefecture-hyogo{
	background-image: url(images/kobe-hyogo.jpg);
    background-size: cover;
    background-attachment: fixed;
	padding: 50px;
}
#prefecture-hyogo .section-contenu{
	background-color: rgba(255,255,255,0.8);
	padding: 50px;
}
#prefecture-hyogo p{}
#prefecture-hyogo .gallery{
    margin: 50px auto 0;
}
#prefecture-hyogo h3{
	margin-top: 50px;
}
#prefecture-hyogo #cooperation{
	padding-top: 50px;
}
#prefecture-hyogo #cooperation h3{
	margin-bottom: 50px;
}
#prefecture-hyogo #cooperation h4{
	margin: 20px 0 20px 0;
    background-image: url(images/icone-yokoso.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 35px;
    padding-left: 40px;
}
#prefecture-hyogo #cooperation ul{
	padding-left: 50px;
}
#prefecture-hyogo #cooperation ul li{
	list-style: disc;
}
#prefecture-hyogo #liens-hyogo ul{
	padding: 50px 0;
}
#prefecture-hyogo #liens-hyogo ul li{
	padding: 5px 0;
}
#prefecture-hyogo #liens-hyogo ul li a{}
#prefecture-hyogo #liens-hyogo ul li a i{
	font-size: 1em;
	margin-right: 5px;
}
#prefecture-hyogo .chibi{
	position: absolute;
    z-index: 2;
    bottom: 0;
    right: 5%;
    width: 200px;
}
#liens-hyogo{
	padding-top: 50px;
}

/*----------------------------------*/
/*   	 Section Presse    		    */
/*----------------------------------*/
#presse{
	background-color: var(--beige-fonce);
	background-image: url("images/icone-yokoso-beige.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% 80%;
}
#presse .section-contenu{
	padding: 100px 50px;
}
#presse .section-contenu h2{
	margin-bottom: 50px;
}
#presse .section-contenu ul{
	columns: 2 auto;
	padding: 50px 0;
}
#presse .section-contenu ul li{}
#presse .section-contenu ul li a{}
#presse .section-contenu ul li a i{
	margin-right: 5px;
	font-size: 1em;
}




/* MEDIA QUERIES */
/*===============*/
/* Ordinateur */
@media screen and (min-width: 1024px) {
	.col-xl-50{
		width: 50%;
	}
}
@media screen and (max-width: 1287px) and (min-width: 1024px) {
	nav.navbar .logo{
		max-width: 150px;
	}
	nav.navbar .nav-links .animation{
		min-width: 30px;
	}
	nav.navbar .nav-links>ul>li{
		min-width: 100px;
	}
	nav.navbar .nav-links>ul>li>a{
		padding: 10px 30px 10px 30px;
	}
	nav.navbar .nav-links>ul>li>ul{
		min-width: 130px;
	}
	
	/* Slider */
	h1{
		font-size: 4em;
		text-align: center;
	}
	.swiper .swiper-slide .slide-content:not(.not-bg){
		max-width: 600px;
	}
	.swiper .swiper-slide .slide-content.not-bg h2{
		font-size: 1.5em;
	}
	.swiper .swiper-slide .slide-content:not(.not-bg) h2{
		font-size: 1.8em;
	}
}
/* Tablette */
@media screen and (max-width: 1024px) {
	header{
		padding-top: 50px;
	}
	/* Navbar */
	nav.navbar{
		padding: 10px 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		background-color: var(--beige);
	}
	nav.navbar .nav-links{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		background-color: var(--blanc);
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -130%;
	}
	nav.navbar .nav-links ul{
		flex-direction: column;
		gap: 0px;
		padding: 0;
		height: 100%;
		box-shadow: none;
		border-radius: 0;
		width: 100%;
	}
	nav.navbar .nav-links ul li{
		flex-direction: column;
		align-items: start;
	}
	nav.navbar .nav-links>ul>li.active:before{
		content: url(images/icone-yokoso.svg);
		width: 30px;
		display: block;
		z-index: 0;
		position: absolute;
		top: 6px;
		left: 6px;
		height: 30px;
	}
	nav.navbar .nav-links ul li a{
		font-size: 1.1em;
		padding: 5px 45px;
	}
	nav.navbar .nav-links ul li a i{
		display: none;
	}
	nav.navbar .nav-links ul li ul{
		position: relative;
		height: auto;
		flex-direction: column;
		align-items: start;
		padding-left: 100px;
	}
	nav.navbar .nav-links ul li ul li{}
	nav.navbar .nav-links ul li ul li a{
		padding: 5px;
	}
	nav.navbar .icon-menu-mobile{
		display: block;
	}
	nav.navbar .nav-links .animation{
		display: none;
	}
	
	/* Slider */
	.swiper-backface-hidden .swiper-slide{
		overflow: hidden;
	}
	.swiper .swiper-slide .img-bg-slide{
		object-fit: cover;
		width: auto;
	}
	h1{
		font-size: 3.5em;
		line-height: 0.5em;
		margin-bottom: 50px;
	}
	.swiper-backface-hidden .swiper-slide .slide-content.not-bg{
		max-width: 80%;
		text-align: center;
		padding: 50px;
	}
	.swiper-slide .slide-content:not(.not-bg) h2{
		line-height: 1.3em;
	}
	.swiper .swiper-slide .slide-content:not(.not-bg){
		max-width: 50%;
		margin-top: 50px;
	}
	
	section .section-contenu{
		padding: 100px 20px 50px 20px;
	}
	
	/* Tableau tarifs */
	#tableau-tarifs{
		
	}
	#tableau-tarifs thead tr th > h4{
		font-size: 15px;
	}
	#tableau-tarifs thead tr th .nb-pers{
		height: 70px;
		width: 70px;
		bottom: 4px;
		line-height: 60px;
		border: 3px solid #fff;
	}
	#tableau-tarifs thead tr th .nb-pers span{
		font-size: 12px;
		bottom: 13px;
		left: 8px;
	}
	#tableau-tarifs tbody tr td{
		line-height: 0em;
		height: 35px;
		font-size: 0.9em;
	}
	#tableau-tarifs tbody tr td:nth-child(1){
		line-height: 1.3em;
	}
	#tableau-tarifs tbody tr td span{
		position: relative;
		display: block;
		margin: 0;
		top: 0;
	}
	
	/* Boutons */
	.btn-file{
		display: block;
		margin-bottom: 20px;
	}
	
	/* Infos pratiques */
	.infos{
		display: block;
	}
	.infos img.chibi{
		margin: 20px auto 0;
		display: block;
	}
	.annulation-cours{
		padding: 30px 30px 200px 30px;
	}
	.annulation-cours img.chibi{
		float: none;
		margin: 0 auto;
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.annulation-cours h4{
		margin-bottom: 20px;
	}
	
	/* Yokoso */
	#yokoso-presentation{
		flex-direction: column;
	}
	#yokoso-presentation::before{
		top: 14%;
		width: 200%;
		left: -7%;
	}
	#yokoso-presentation .presentation{
		width: 100%;
	}
	#yokoso-presentation .professeur{
		width: 90%;
	}
	.image-gallery .ligne{}
	#yokoso-traduction .exemple{
		padding-left: 30px;
	}
	
	footer .footer-contenu{
		flex-direction: column;
	}
	footer .footer-contenu .column-1,
	footer .footer-contenu .column-2,
	footer .footer-contenu .footer-links{
		width: 100%;
	}
	footer a.logo img{
		max-width: 300px;
	}
}
/* Smartphone */
@media screen and (max-width: 600px) {
	.swiper .swiper-slide .slide-content:not(.not-bg){
		padding: 40px;
		max-width: 65%;
	}
	.swiper .swiper-slide .slide-content h1{
		line-height: 0em;
	}
	.swiper .swiper-slide .slide-content.not-bg h2{
		font-size: 1.5em;
		line-height: 1.3em;
	}
	.swiper .swiper-slide .slide-content:not(.not-bg) h2{
		font-size: 1.7em;
		font-weight: bold;
		line-height: 1.3em;
	}
	.swiper .swiper-slide .slide-content p{
		line-height: 1.3em;
		margin-top: 30px;
		font-size: 1.2em;
	}
	.swiper .swiper-button-prev{}
	.swiper .swiper-button-next{}
	.section-contenu h2{
		line-height: 0em;
		margin-bottom: 50px;
	}
	#prefecture-hyogo .section-contenu{
		padding: 0 30px;
	}
	#prefecture-hyogo .section-contenu h2{
		padding-top: 50px;
	}
	.image-gallery .ligne{
		flex-direction: column;
	}
	.col-xs-12{
		padding: 0;
	}
	#prefecture-hyogo .chibi{
		display: block;
		margin: auto;
		right: 0;
		position: relative;
	}
	#yokoso-ateliers{
		padding-top: 70px;
	}
	#yokoso-ateliers>.ligne{
		flex-direction: column;
		padding: 0;
		margin-bottom: 20px;
	}
	#yokoso-ateliers>.ligne>div{
		padding: 20px;
		width: calc(100% - 40px);
	}
	#yokoso-traduction{
		border-top-width: 50px;
	}
	#tableau-tarifs tbody tr td{
		line-height: 1em;
	}
	#partenaires{
		padding-bottom: 200px;
	}
	#partenaires .chibi{
		bottom: -200px;
		right: 50%;
		transform: translateX(50%);
	}
	#prefecture-hyogo{
		padding: 50px 20px;
	}
	#presse .section-contenu{
		padding: 100px 30px;
	}
	#presse .section-contenu ul{
		columns: 1 auto;
		padding: 30px 0;
	}
	#presse .section-contenu ul li{
		margin-bottom: 10px;
	}
	.modal .modal-content ul{
		flex-direction: column;
		width: 100%;
		min-width: 300px;
		align-items: center;
		gap: 10px;
	}
}


/* ASTUCES CSS */
/*==================*/
/* Changer la couleur de sélection du texte 
::-moz-selection { /* Code for Firefox 
  color: red;
  background: yellow;
}
::selection {
  color: red;
  background: yellow;
}*/


/* Centrer verticalement dans colonne */
.vertical-align {
	display: flex;
	flex-direction: column;
}
.align-top {
	justify-content: flex-start;
}
.align-center {
	justify-content: center;
}
.align-bottom {
	justify-content: flex-end;
}

/* Inverser les colonnes */
@media only screen and (max-width: 600px) {
	.custom_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		flex-wrap: wrap;
	}

	.first-on-mobile {
		-webkit-order: 1;
		order: 1;
	}

	.second-on-mobile {
		-webkit-order: 2;
		order: 2;
	}
}
@media only screen and (min-width: 600px) and (max-width: 1024px){
	.custom_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		flex-wrap: wrap;
	}

	.first-on-tablet {
		-webkit-order: 1;
		order: 1;
	}

	.second-on-tablet {
		-webkit-order: 2;
		order: 2;
	}
}