/* Général Hors Reponsive*/
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,
small, strike, strong, sub, sup, 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, main, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, 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;
}
/* -------- Général Hors responsive -------- */
img {
max-width: 100%;
}
a {
color: #FF7D3F;
text-decoration: none;
transition: 0.5s;
}
a:hover {
color: #F32D2E;
}
ol,ul {
list-style:none;
}
strong{
font-weight: normal;
}
h1{
font-size: 1.75rem;
}
p{
font-size: 1.125rem;
line-height: 1.4rem;
}
.centre{
text-align: center;
}
/* -------- Paddings hauts et bas sur section -------- */
section {
padding-top: 3rem;
padding-bottom: 3rem;
}
/* ------- Paddings hauts et bas sur section à partir de 726px --------*/
@media screen and (min-width:45.375em) {
section {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
/* ------- Paddings hauts et bas sur section à partir de 1200px --------*/
@media screen and (min-width:75em) {
section {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
/* ------- Paddings hauts et bas sur section à partir de 1400px --------*/
@media screen and (min-width:92.5em) {
section {
padding-top: 10rem;
padding-bottom: 10rem;
}
}
/* -------- Body-Header -------- */
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
header{
height:80px;
background-color: transparent;
width: 100%;
z-index: 200;
display: flex;
position: fixed;
}
/* -------- HEADER à partir de 992px -------- */
@media screen and (min-width:62em) {
header {
background-color: rgba(0, 0, 0, 0.3);
transition : 2s;
}
header.fix-white{
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #fff;
}
}
/* -------- MENU dans la boite du header --------*/
button {
background: transparent;
border: none;
cursor: pointer;
display: flex;
}
button:focus {
outline: none;
}
#icon-nav {
width: 60px;
height: 60px;
position: fixed;
z-index: 300;
background-color: #FF7D3F;
right: 0;
}
#icon-nav span {
position: absolute;
height: 2px;
width: 30px;
background-color: #2C2C2C;
left: 15px;
transition: all 0.2s ease;
}
#icon-nav span:nth-child(1) {
top: 16px;
}
#icon-nav span:nth-child(2) {
top: 28px;
}
#icon-nav span:nth-child(3) {
top: 40px;
}
#icon-nav.trigger span:nth-child(1) {
transform: rotate(45deg);
top: 30px;
}
#icon-nav.trigger span:nth-child(2) {
opacity: 0;
}
#icon-nav.trigger span:nth-child(3) {
transform: rotate(-45deg);
top: 30px;
}
.nav-reseaux-container {
width: 100%;
background-color: #FF7D3F;
text-align: center;
position: fixed;
z-index: -3;
transition: 1s;
height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-reseaux-container.jaune{
background-color: #FEC601;
}
#nav-reseaux-container.expand {
z-index: 200;
-webkit-transform: translateX(0);
transform: translateX(0);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
nav {
width: 100%;
line-height: 4rem;
}
nav ul {
list-style-type: none;
width: 100%;
height: 100%;
}
nav li {
padding: 0;
border-bottom: 1px solid #fff;
transition: background-color 1s ease;
}
nav li:hover {
background-color: #fc7a16;
}
nav li a {
text-decoration: none;
text-transform: uppercase;
display: block;
color: #564938;
}
nav a:hover {
text-decoration: none;
color: #2C2C2C;
}
.current a {
color:#2C2C2C !important;
}
.liensblancs a {
color: #fff;
transition: 0.5s;
}
.liensblancs a:hover {
color: #2C2C2C;
}
.liensoranges a {
color: #fff;
transition: 0.5s;
}
.liensoranges a:hover {
color: #191919;
}
.reseaux-header{
display: flex;
justify-content: space-between;
width: 200px;
padding-top: 1.5rem;
}
.go2 {
width: 40px;
height: 40px;
border: 2px solid #fff;
color: #fff;
border-radius: 40px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.go2 a{
color: #fff;
display: block;
width: 100%;
}
.go2:hover {
border: 2px solid #FF7D3F;
border-radius: 40px;
}
.go2 a:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transition:transform 0.5s ease-out;
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
}
/* ------- MENU-RESEAUX landscape Paysage --------*/
@media (orientation: landscape) and (max-width : 991px) {
nav {
line-height: 2.7rem;
}
}
/* ------- MENU-RESEAUX à partir de 992px --------*/
@media screen and (min-width:62em) {
#icon-nav {
display: none;
}
.nav-reseaux-container {
z-index: 300;
opacity: 1;
display:flex;
flex-direction: row;
height: 80px;
background-color: transparent;
justify-content: space-between;
}
.reseaux-header {
display: flex;
justify-content: space-between;
padding-top: 0;
align-items: center;
height: 80px;
order: -1;
flex-basis: 200px;
margin-left: 20px;
}
nav {
flex-basis: 80%;
height: 80px;
display: flex;
justify-content: flex-end;
align-items: center;
opacity: 1;
background-color: transparent;
}
nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: none;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
}
nav li {
border-bottom: none;
padding-right: 1.4rem;
}
nav li a {
font-weight: 700;
}
.current a {
color: #FF7D3F !important;
}
.current2 a {
color:#fff!important;
}
nav li:nth-child(1) {
border-top: none;
}
nav li:hover {
background-color: transparent;
}
nav a:hover {
color:#FF7D3F !important;
}
.liensoranges a {
color: #FF7D3F;
transition: 0.5s;
}
.liensoranges a:hover {
color: #fff !important;
}
}
/* ------- MENU-RESEAUX à partir de 1200px --------*/
@media screen and (min-width:75em) {
nav li {
padding-right: 2.5rem;
}
nav li a {
font-weight: 700;
font-size: 1.125rem;
}
}
/* ------- MENU-RESEAUX à partir de 1480px --------*/
@media screen and (min-width:92.5em) {
.reseaux-header {
margin-left: 5rem;
}
}
/* ------- Image accueil --------*/
.section-accueil-image {
height: 70vh;
z-index: 100;
background-color: #000;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 0;
}
.section-accueil-image img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: 38% 0;
display: block;
animation : Zoom 60s;
}
.section-groupe-image img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: 55% 0;
display: block;
animation : Zoom 60s;
}
@keyframes Zoom {
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
/* ------- Image accueil à partir de 726px --------*/
@media screen and (min-width:45.375em) {
.section-accueil-image {
height: 85vh;
z-index: 100;
}
.section-accueil-image img{
width: 100%;
}
.section-groupe-image img{
width: 100%;
}
}
/* ------- Image accueil à partir de 1200px --------*/
@media screen and (min-width:75em) {
.section-accueil-image {
height: 90vh;
}
}
/* ------- Logo accueil --------*/
.logo-accueil {
transform: rotate(-3deg);
position: absolute;
bottom: 4vh;
right: 10vw;
}
/* ------- Section-accueil-écrit --------*/
.section-accueil-ecrit{
background-color: #191919;
color:#fff;
background: url(img/bal-a-bahia-fond-1.svg), url(img/bal-bahia-soleil-2.svg), url(img/bal-a-bahia-fond-2.svg) #191919;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 60px, 100px, 70px;
background-position: -30px 0, center right, bottom 1% center;
}
.triangle-h1-container{
display: flex;
align-items: center;
}
.triangle {
width: 0;
height: 0;
border-top: 0.7rem solid transparent;
border-bottom: 0.7rem solid transparent;
border-left: 1rem solid #FF7D3F;
}
.h1-accueil{
margin-left: 1rem;
font-size: 1.3rem;
text-transform: uppercase;
line-height: 1.3rem;
}
.h2-accueil{
font-size: 1.125rem;
font-weight: 700;
padding-top: 2rem;
line-height: 1.5rem;
}
.h2-medias{
font-size: 1.125rem;
font-weight: 700;
padding-top: 2rem;
line-height: 1.5rem;
}
.p-accueil{
font-size: 1.125rem;
margin: 0 auto;
padding-top: 2rem;
line-height: 1.4rem;
}
/* Section-accueil-écrit au dessus de 768px*/
@media (min-width: 48em) {
.section-accueil-ecrit{
background-size: 80px, 100px, 80px;
background-position: -30px 0, center right, bottom 3% center;
}
}
/* Section-accueil-écrit au dessus de 1200px*/
@media (min-width: 75em) {
.section-accueil-ecrit{
background-size: 100px, 200px, 120px;
background-position: -30px 0, center right, bottom 10% left 10%;
}
}
/* Section-accueil-écrit au dessus de 1480px*/
@media (min-width: 92.5em) {
.section-accueil-ecrit{
background-size: 150px, 300px, 120px;
background-position: -30px 0, center right, center bottom 40px;
}
}
/* ------- Section-danse-concert-festif-image --------*/
.section-danse-concert-festif-image{
padding-top: 0;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.section-danse-concert-festif-image img{
display: block;
}
.img-danse {
height: 40vh;
position: relative;
}
.img-danse img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 10%;
}
.img-concert-festif {
height: 40vh;
position: relative;
}
.img-concert-festif img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 30%;
}
.h3-accueil {
position: absolute;
bottom: 10px;
left:20px;
font-size: 1.125rem;
font-weight: 700;
}
.img-danse .h3-accueil{
color: #fff;
}
.img-concert-festif .h3-accueil{
color: #FF7D3F;
}
/* Section-danse-concert-festif-image au dessus de 768px*/
@media (min-width: 48em) {
.section-danse-concert-festif-image{
flex-direction: row;
max-height: 650px;
}
.img-danse {
flex-basis: 35%;
height: auto;
}
.img-concert-festif {
flex-basis: 65%;
background-color: #000;
height: auto;
}
.img-danse img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.img-concert-festif img{
width: 100%;
object-fit: cover;
object-position: center;
}
}
/* Section-danse-concert-festif-image au dessus de 1200px*/
@media (min-width: 75em) {
.img-danse {
max-height: 100vh;
}
.h3-accueil {
bottom: 20px;
left:30px;
font-size: 1.3rem;
font-weight: 700;
}
}
/* ------- Section-concert-familial --------*/
.section-concert-familial{
display: flex;
flex-direction: column;
padding-bottom: 0;
background-color: #191919;
}
.section-concert-familial-texte{
padding-left: 1.25em;
padding-right: 1.25em;
display: flex;
flex-direction: column;
align-items: center;
background: url(img/bal-a-bahia-fond-4-orange.svg), url(img/bal-a-bahia-fond-3-bleu.svg);
background-repeat: no-repeat, no-repeat;
background-size: 100px, 100px;
background-position: top left, bottom right;
}
.h3-rectangle-orange{
background-color:#FF7D3F;
color: #fff;
padding: 1rem 1rem;
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
text-align: center;
transform: rotate(-3deg);
width: 20rem;
border-radius: 7px;
}
.section-concert-familial-texte .h3-rectangle-orange{
padding: 20px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.2);
}
.section-concert-familial-texte p{
margin-top: 2rem;
margin-bottom: 2rem;
font-size: 1.125rem;
line-height: 1.4rem;
border-radius: 7px;
padding: 20px;
background-color: #fff;
}
.section-concert-familial-image{
display: flex;
}
.section-concert-familial-image img{
height: 40vh;
object-fit: cover;
object-position: 65%;
display: block;
width: 100%;
}
/* Section-concert-familial au dessus de 576 Container de 540px*/
@media (min-width: 36em) {
.section-concert-familial-texte{
width: 33.75em;
margin: auto;
}
}
/* Section-concert-familial au dessus de 768*/
@media (min-width: 48em) {
.section-concert-familial-texte {
width: 45em;
margin: auto;
}
.section-concert-familial {
padding-bottom: 5rem;
background-color: #191919;
}
}
/* Section-concert-familial au dessus de 1200*/
@media (min-width: 75em) {
.section-concert-familial {
flex-direction: row;
}
.section-concert-familial-texte{
flex-basis: 40%;
align-items: flex-end;
padding-right: 7rem;
background-size: 100px, 120px;
background-position: bottom left 4%, top right;
}
.section-concert-familial-texte p{
width: 20rem;
}
.section-concert-familial-image{
display: flex;
flex-basis: 60%;
justify-content: flex-end;
align-items: center;
background: url(img/bal-a-bahia-fond-5-cible-jaune.svg);
background-repeat: no-repeat;
background-size: 170px;
background-position: top 9% right 12%;
}
.section-concert-familial-image img{
height: auto;
max-height: 400px;
object-fit: cover;
object-position: 65%;
display: block;
width: 100%;
}
}
/* Section-concert-familial au dessus de 1480px*/
@media (min-width: 92.5em) {
.section-concert-familial {
background: url(img/bal-a-bahia-fond-4-orange.svg), url(img/bal-a-bahia-fond-5-cible-jaune.svg) #2b2a2a;
background-repeat: no-repeat, no-repeat;
background-size: 400px, 300px;
background-position: bottom 3% left 1%, top 14% right 12%;
padding-bottom: 7rem;
}
.section-concert-familial-texte{
background-size: 0, 0px;
background-position: bottom left 4%, top right;
}
.section-concert-familial-image{
background: none;
}
.section-concert-familial-image img{
max-height: 550px;
}
}
/* ------- Section-Teaser --------*/
.section-teaser{
color: #fff;
background: url(img/bal-a-bahia-fond-teaser.svg), url(img/bal-a-bahia-fond-6-ronds.svg) #FF7D3F;
background-repeat: repeat, no-repeat;
background-size: 50px, 100px;
background-position: bottom right;
}
.h3-rectangle-orange-droit{
background-color:#191919;
color: #fff;
padding: 1rem 1rem;
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
text-align: center;
}
.video-wrapper-texte-dessous{
max-width: 100%;
display: flex;
flex-direction: column;
}
.video-container {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
video {
height:100%;
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
z-index: 3;
}
.video-wrapper-texte-dessous p{
margin: 30px 0 60px 0;
}
.triangle-h3-container{
display: flex;
align-items: center;
}
.h3-accueil-apres-triangle {
margin-left: 1rem;
font-size: 1.3rem;
line-height: 1.3rem;
}
.texte-droite-section-teaser{
background-color: #fff;
padding: 20px;
border-radius: 7px;
color: #191919;
}
.texte-droite-section-teaser p{
margin-top: 30px;
}
/* -------- SEXTION-TEASER à partir de 768px 48em-------- */
@media screen and (min-width:48em) {
.section-teaser{
background-size: 80px, 180px;
background-position: bottom right;
}
.h3-rectangle-orange-droit{
width: 30%;
margin-bottom: 0;
}
.video-wrapper-texte-dessous p{
width: 60%;
align-self: center;
margin: 10px 0 80px 0;
}
}
/* -------- SECTION-TEASER à partir de 992px 62em-------- */
@media screen and (min-width:62em) {
.video-wrapper-texte-dessous p{
width: 68%;
}
.texte-droite-section-teaser {
width: 65%;
margin: 0 auto;
}
}
/* -------- SEXTION-TEASER à partir de 1200px 75em-------- */
@media screen and (min-width:75em) {
.section-teaser{
padding-top: 7rem;
padding-bottom: 2rem;
}
.section-teaser-flex
{
display: flex;
}
.video-wrapper-texte-dessous{
max-width: 100%;
flex-basis: 70%;
}
.video-wrapper-texte-dessous p {
width: 93%;
}
.texte-droite-section-teaser{
margin: -40px 0 0 40px;
align-self: center;
flex-basis: 30%;
box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
padding: 20px;
background-color: #fff;
}
}
/* Section Teasert au dessus de 1480px 92.5em*/
@media (min-width: 92.5em) {
.section-teaser{
background-size: 100px, 250px;
background-position: bottom 60px right -20px;
}
.video-wrapper-texte-dessous{
flex-basis: 60%;
}
.texte-droite-section-teaser{
margin: -90px 0 0 40px;
flex-basis: 40%;
}
.texte-droite-section-teaser p{
padding-right: 1rem;
}
}
/* ------- Section-mp3 --------*/
.section-mp3-index{
background: url(img/bal-a-bahia-fond-7-cible-bas.svg), url(img/bal-a-bahia-fondz-articles-27-triangles-cibles.svg);
background-repeat: no-repeat, no-repeat;
background-size: 100px, 380px;
background-position: bottom left, top 32% left 20%;
}
.section-mp3-container-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image-cd{
flex-basis: 400px;
margin-bottom: 2rem;
}
.image-cd img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section-mp3 p{
text-align: center;
margin-bottom: 20px;
}
.fondchanson {
border:3px solid #e49672;
padding: 1rem 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto 2rem;
border-radius: 7px;
}
.fondchanson h3 {
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.image-chanteuse{
width: 300px;
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.image-chanteuse img{
width: 100%;
height: 100%;
object-fit: cover;
}
.fondchanson audio {
width: 250px;
}
.btn-ecoutez{
width: 260px;
border: 2px #F32D2E solid;
text-align: center;
border-radius: 15px;
height: 60px;
display: flex;
align-items: center;
margin: 10px auto;
background-color: #fff;
}
.btn-ecoutez a{
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
font-weight: 700;
}
.btn-ecoutez:hover{
color: #F32D2E;
border: 2px #FF7D3F solid;
}
.triangle-h4-container{
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.h4-accueil-apres-triangle {
margin-left: 1rem;
font-size: 1.3rem;
line-height: 1.3rem;
text-transform: uppercase;
}
/* -------- SECTION-MP3 à partir de 768px 48em-------- */
@media screen and (min-width:48em) {
.section-mp3-index{
background-size: 200px, 400px;
background-position: bottom left, top 32% right -28%;
padding-top: 7rem;
}
.section-mp3-container-flex .card{
margin: 1rem auto 2rem;
width: 75%;
}
.fondchanson audio {
width: 300px;
}
}
/* -------- SECTION MP3 à partir de 1200px 75em-------- */
@media screen and (min-width:75em) {
.section-mp3-index{
background-size: 200px, 700px;
background-position: bottom left, center;
padding-top: 7rem;
}
.triangle-h4-container {
margin-bottom: 4rem;
}
.section-mp3-index .container{
display: flex;
align-items: center;
}
.section-mp3-container-flex .card{
margin: 1rem auto 2rem;
width: 80%;
height: 200px;
}
.section-mp3-container-flex{
flex-wrap: nowrap;
}
.image-cd{
flex-grow: 0;
flex-shrink: 1;
flex-basis: 400px;
align-self: flex-start;
}
.image-cd img {
object-fit: contain;
}
.section-mp3-container-flex .container{
flex-grow: 0;
flex-shrink: 1;
flex-basis: 50%;
min-width: 600px;
display: flex;
flex-direction: column;
}
.image-chanteuse{
flex-grow: 0;
flex-shrink: 1;
flex-basis: 300px;
align-self: flex-end;
}
.image-chanteuse img{
object-fit: contain;
}
.fondchanson {
width: 100%;
align-self: center;
}
}
/* Section Teasert au dessus de 1480px 92.5em*/
@media (min-width: 92.5em) {
.section-mp3-index{
background-size: 200px, 1000px;
background-position: bottom left, center;
padding-top: 7rem;
}
}
/* GENERAL FOOTER responsive */
footer {
background-color:#FF7D3F;
padding: 3rem 0 0 0;
}
footer h5 {
text-align: center;
font-size: 1.125rem;
padding: 1rem 0;
margin: 0;
text-transform: uppercase;
color: #fff;
}
footer p {
box-sizing: border-box;
padding: 0;
font-size: 1.125rem;
text-align: center;
height: auto;
color: #edeae6;
line-height: 1.5rem;
}
.p-mail{
margin: 1.35rem 0;
}
.boite-footer {
margin-bottom: 2rem;
padding: 1rem 0;
border-radius: 7px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
}
#footerref a{
color: #3c3838;
display: flex;
justify-content: center;
}
#footerref .p-mail a:hover {
color: #F32D2E;
}
.boite-reseaux{
display: flex;
justify-content: space-between;
width: 180px;
margin: 0 auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
footer .go2 {
border: 2px solid #3c3838;
}
footer .go2 a {
text-decoration: none;
}
footer .go2:hover {
border: 2px solid #3c3838;
}
.coordonnees ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.coordonnees li{
margin-bottom: 1rem;
width: 70%;
}
.coordonnees li a{
margin: 0;
text-decoration: none;
text-align: center;
padding: 0.8em 0;
transition: all 0.3s ease-in;
border: 1px dotted #564938;
position: relative;
right: 0;
}
.coordonnees li a:hover,
.coordonnees li a:focus{
right: -5px;
text-decoration: none;
border: 1px solid #564938;
}
/* -------- Footer à partir de 768px 48em-------- */
@media screen and (min-width:48em){
footer {
background-color:#FF7D3F;
padding: 3rem 0;
}
.boite-footer {
height: 100%;
}
}
/* -------- Footer à partir de 1200px 75em-------- */
@media screen and (min-width:75em){
footer {
padding-top: 4.35rem;
padding-bottom: 4.35rem;
background: url(img/bal-a-bahia-fond-8-triangles.svg), url(img/bal-a-bahia-fond-9-cible.svg) #FF7D3F;
background-repeat: no-repeat, no-repeat;
background-size: 100px, 80px;
background-position: center left, bottom 2.1rem right 3.1rem;
}
}
/* PAGE GROUPE SECTION PAGE GROUPE */
/* ------- Image Groupe --------*/
.section-groupe-image {
height: 70vh;
z-index: 100;
background-color: #000;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 0;
}
.section-groupe-image img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: 38% 0;
display: block;
animation : Zoom 60s;
}
.section-groupe-image img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: 55% 0;
display: block;
animation : Zoom 10s;
}
@keyframes Zoom {
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
/* ------- Image groupe à partir de 726px --------*/
@media screen and (min-width:45.375em) {
.section-groupe-image {
height: 85vh;
z-index: 100;
}
.section-groupe-image img{
width: 100%;
}
.section-groupe-image img{
width: 100%;
}
}
/* ------- Image groupe à partir de 1200px --------*/
@media screen and (min-width:75em) {
.section-groupe-image {
height: 100vh;
}
}
/* ------- Section Page Groupe écrit --------*/
.page-groupe-ecrit{
background: url(img/bal-a-bahia-fond-groupe-10-fleches.svg), url(img/bal-a-bahia-fond-groupe-11-genou.svg ) #191919;
background-repeat: no-repeat, no-repeat;
background-size: 100px, 100px;
background-position: center bottom 2rem, top right;
padding-bottom: 8rem;
color:#fff;
}
/* ------- Section Page Groupe écrit à partir de 726px --------*/
@media screen and (min-width:45.375em) {
.page-groupe-ecrit{
background-position: center bottom 2rem, top 10% right;
padding-bottom: 12rem;
}
}
/* -------- Section Page Groupe écrit à partir de 992px -------- */
@media screen and (min-width:62em) {
.page-groupe-ecrit{
background-position: center bottom 2rem, top 10% right 10%;
background-size: 150px, 200px;
padding-bottom: 12rem;
}
}
/* ------- Section Page Groupe écrit à partir de 1200px --------*/
@media screen and (min-width:75em) {
.page-groupe-ecrit{
background-position: center bottom 2rem, center right 5%;
background-size: 150px, 300px;
padding-bottom: 12rem;
}
}
/* ------- Section Cartes et Portraits Page Groupe --------*/
.row-cards{
margin-left: 0;
}
section.portraits{
position: relative;
background: url(img/bal-a-bahia-fond-12-cible-droite.svg) #fff;
background-repeat: no-repeat;
background-size: 100px;
background-position: right bottom;
}
.portraits article {
position: relative;
}
.portraits article img{
border-radius: 50%;
transition: 0.5s;
}
.border-img{
border: 3px solid #FF7D3F;
border-radius: 50%;
overflow: hidden;
display: inline-block;
}
.portraits p {
text-align: center;
}
figure {
margin: 0;
font-size: 0;
position: relative;
overflow: hidden;
margin-top: 4rem;
text-align: center;
}
figcaption {
z-index: 1;
padding: 0;
box-sizing: border-box;
position: relative;
bottom: 4rem;
}
.effet-1 p {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
color:#FF7D3F;
font-weight: 900;
text-shadow:0 3px 20px rgba(255,255,255,0.8);
-webkit-transition: opacity 0.35s ease-in-out;
-webkit-transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
}
.effet-1:hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.effet-1 img{
position: relative;
}
.effet-1:hover img {
filter: grayscale(100%);
transform: scale(1.10,1.10);
-webkit-transform:scale(1.10,1.10);
-moz-transform:scale(1.10,1.10);
-ms-transform:scale(1.10,1.10);
-o-transform:scale(1.10,1.10);
}
article p{
color: #FF7D3F;
}
.card{
/*background-color: #edeae6;*/
position: relative;
margin: 3rem auto 3rem;
padding: 2rem;
border-radius: 7px;
box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
background: url(img/bal-a-bahia-fond-groupe-13-soleil.svg) #FF7D3F;
background-repeat: no-repeat;
background-size: 400px;
background-position: left -150px center;
}
.cards{
background-color: #edeae6;
margin-bottom: 2rem;
position: relative;
}
.card h3, section.apresteaser h4{
font-size: 1.25rem;
text-align: center;
margin-bottom: 1rem;
font-weight: 700;
}
.card p {
color: #191919;
text-align: justify;
line-height: 2rem;
}
.card p.center{
text-align: center;
}
.icon {
text-align: center;
}
.card p.center{
text-align: center;
color: #000;
}
.card p.mb{
margin-bottom: 2rem;
}
.go {
display: block;
position: absolute;
top: -25px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
border: 2px solid #D97904;
text-align: center;
color: #D97904;
border-radius: 50px;
font-size: 20px;
padding-top: 12px;
background-color: #edeae6;
}
/* Section Portraits à partir de 768px */
@media screen and (min-width:48em)
{
.card2{
flex: 0 0 calc(50% - 0.9375em);
}
}
/* ------- Section Portraits à partir de 726px --------*/
@media screen and (min-width:45.375em) {
section.portraits{
position: relative;
background: url(img/bal-a-bahia-fond-12-cible-droite.svg), url(img/bal-a-bahia-fond-groupe-12-ronds.svg) #fff;
background-repeat: no-repeat, no-repeat;
background-size: 200px, 250px;
background-position: right bottom, left top;
}
}
/* PAGE MÉDIAS SECTION */
section.page-medias-top{
position: relative;
background: url(img/bal-a-bahia-fond-medias-14-barres.svg), url(img/bal-a-bahia-fond-medias-16-soleil-jaune.svg) #191919;
background-repeat: no-repeat, no-repeat;
background-size: 200px, 700px;
background-position: top 100px left, bottom -120px right -300px;
color: #fff;
}
.bandeimage{
margin: 5rem auto;
flex-basis: 425px;
}
.bandeimage img{
width: 100%;
}
@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
.shake {
animation-name: shake;
}
.bandeimage:hover{
animation: shake 4s;
}
section.page-medias-center{
background: url(img/bal-a-bahia-fond-teaser.svg), url(img/bal-a-bahia-fond-medias-18-cible-noire.svg) #FF7D3F;
background-repeat: repeat, no-repeat;
background-size: 50px,200px;
background-position: bottom 5px center;
padding-top: 2rem;
padding-bottom: 5rem;
}
.h2-medias{
text-align: center;
padding-top: 1rem;
margin-bottom: 2rem;
}
.page-medias-top .p-accueil{
margin: 0 0 4rem 0;
}
.page-medias-top .h3-rectangle-orange{
transform: none;
width: 50%;
padding: 0.5rem;
margin: auto;
border-radius: 0px;
}
.page-medias-center .h2-rectangle-noir{
background-color:#191919;
color: #fff;
padding: 0.5rem;
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 700;
text-align: center;
margin: auto;
width: 50%;
}
.video-wrapper {
width: 853px;
max-width: 100%;
margin: 0 auto;
}
/* -------- Section MÉDIAS SECTION à partir de 992px -------- */
@media screen and (min-width:62em) {
section.page-medias-center{
background-size: 200px, 400px;
background-position: bottom 15px center;
padding-top: 5rem;
padding-bottom: 10rem;
}
section.page-medias-top{
background-size: 200px, 1100px;
background-position: top 100px left, bottom 100px right -300px;
}
.page-medias-top .h3-rectangle-orange{
width: 30%;
}
.page-medias-center .h2-rectangle-noir{
width: 30%;
}
.page-medias-center .row{
flex-direction: column;
}
}
/* -----------PAGE News et Blog -----------*/
.row-cards {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
article.cardblog {
background-color: #fff;
position: relative;
border-radius: 5px;
box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
transition: 0.5s;
margin-left: .9375em;
margin-right: .9375em;
margin-top: 4rem;
}
article.cardblog:hover {
background-color: #FEC601;
}
article.cardblog:hover {
box-shadow: 10px 10px 25px rgba(0,0,0,0.4);
filter: grayscale(0);
}
figure {
margin: 0;
margin-top: 0px;
font-size: 0;
position: relative;
overflow: hidden;
margin-top: 4rem;
text-align: center;
}
article.cardblog figure {
margin-top: 0;
position: relative;
Border-top-right-radius: 5px;
Border-top-left-radius: 5px;
}
.auteurblog {
display: block;
position: relative;
top: -40px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
text-align: center;
color: #FF7D3F;
border-radius: 70px;
}
.auteurblog img {
display: block;
position: absolute;
width: 80px;
height: 80px;
border-radius: 80px;
border: 5px solid #fff;
top: 0;
filter: grayscale(1);
transition: 1.5s;
}
.auteurblog img:hover{
filter: grayscale(0);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
}
.cardTexteBlog {
padding: 0 2.1875rem 4rem;
}
article.cardblog h3 {
color: #D97904;
margin-top: 0;
margin-bottom: 2rem;
font-size: 1.25rem;;
}
article.cardblog p{
color: #191919;
}
.infosArticle {
display: flex;
align-items: center;
color:rgba(216, 106, 54, 0.9);
position: absolute;
bottom: 20px;
}
.voyage, .dateArticle {
display: flex;
align-items: center;
padding-right: 40px;
}
.dateArticle {
justify-content: flex-end;
}
article.cardblog .infosArticle p {
color:rgba(216, 106, 54, 0.9);
font-size: 1rem;
padding: 0 0 0 1rem;
margin-top: 0;
}
/* -------- Page News et Blog à partir de 768px -------- */
@media screen and (min-width:48em) {
article.cardblog {
flex: 0 0 calc(50% - 0.9375em);
}
}
/* -------- Page News et Blog à partir de 992px -------- */
@media screen and (min-width:62em) {
article.cardblog {
flex: 0 0 calc(33.33333333% - 0.9375em);
}
}
/* Page News et Blog au dessus de 1480px 92.5em*/
@media (min-width: 92.5em) {
article.cardblog {
flex: 0 0 calc(25% - 0.9375em);
}
}
/* -----------PAGE Espace Pro -----------*/
.imgpro {
width: 250px;
margin: 30px auto;
}
.section-espace-pro-top{
background: url(img/bal-a-bahia-fond-pro-19-ronds.svg), url(img/bal-a-bahia-fond-pro-20-cible.svg) #191919;
background-repeat: no-repeat, no-repeat;
background-size: 200px, 400px;
background-position: bottom 20px center, top 6rem left -10rem;
padding-bottom: 14rem;
color: #fff;
}
.section-espace-pro-center{
padding-top: 2rem;
background: url(img/bal-a-bahia-fond-pro-22-soleil.svg), url(img/bal-a-bahia-fond-pro-23-genou.svg), url(img/bal-a-bahia-fond-pro-21-marches.svg) #191919;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 250px, 50px, 100px;
background-position: top right -10rem, bottom 21rem left 1rem, bottom right;
color: #fff;
}
.section-espace-pro-center .h3-rectangle-orange{
margin: auto;
width: 15rem;
}
.section-espace-pro-center p{
margin: 3rem auto 2rem;
width: 60%;
}
/* -------- Page Espace Pro à partir de 768px -------- */
@media screen and (min-width:48em) {
.section-espace-pro-center{
background-size: 350px, 100px, 200px;
background-position: top right -10rem, bottom 18rem left 1rem, bottom right;
}
}
/* -------- Page Espace pro à partir de 992px -------- */
@media screen and (min-width:62em) {
.section-espace-pro-top{
background-size: 300px, 500px;
background-position: bottom center, top 6rem left -15rem;
padding-bottom: 18rem;;
}
.section-espace-pro-center .h3-rectangle-orange{
width: 30rem;
}
}
/* ------- Page News et Blog à partir de 1200px --------*/
@media screen and (min-width:75em) {
.section-espace-pro-center{
background-size: 450px, 100px, 200px;
background-position: top right -10rem, bottom 20rem left 10rem, bottom right;
padding-top: 4rem;
}
}
/* ------- Page Blog articles --------*/
.blog-contenu .video-wrapper {
margin-top: 2rem;;
}
/* PAGE CONTACT*/
form{
min-height: 5rem;
margin: 3rem auto;
}
form p{
color: #FF7D3F;
}
textarea {
display: block;
width: 80%;
margin: 20px auto;
}
fieldset{
margin-top: 2rem;
}
legend {
margin-bottom: 1rem;
}
input{
padding: 0.5rem;
margin: 1rem;
width: 80%;
}
input.submit {
display: block;
width: 90%;
padding: 10px 15px;
font-size: 1rem;
border-radius: 0;
-webkit-appearance: none;
margin: 4rem auto;
cursor: pointer;
background-color: #FF7D3F;
color: #fff;
border: 1px solid #FF7D3F;
}
input.submit:hover{
background-color: #fff;
color: #FF7D3F;
border: 1px solid #FF7D3F;
}
p.contactreponse {
color: #FF7D3F;
margin: 6rem auto;
text-align: center;
font-size: 1.5rem;
}
p.contacterreur {
color: red;
margin: 6rem auto;
text-align: center;
}
.pagecontact h3{
margin-top: 2rem;
text-align: center;
color: #FF7D3F;
font-size: 1.4rem;
}
main.pagecontact{
padding-top: 5rem;
color: #fff;
background: #191919;
}
/* -------- Page Contact à partir de 992px -------- */
@media screen and (min-width:62em) {
main.pagecontact{
background: url(img/bal-a-bahia-fond-pro-21-marches.svg) #191919;
background-repeat: no-repeat;
background-size: 200px;
background-position: top 6rem right;
}
textarea {
display: block;
width: 30rem;
margin: 20px auto;
}
input{
padding: 0.5rem;
margin: 1rem;
width: 30rem;
}
input.submit {
width: 30rem;
}
}
/* PAGE INDIVIDUELLE DU BLOG*/
section.blogTexte{
padding-top: 0;
padding-bottom: 0;
}
.section-blog-accueil-image{
height: 70vh;
z-index: 100;
background-color: #000;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 0;
}
.section-blog-accueil-image img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.section-blog-accueil-image .h3-rectangle-orange{
position: relative;
margin: 0 auto;
bottom : 7rem;
padding: 2rem;
font-size: 1.6rem;
}
.h2-blog {
padding: 1rem 0;
font-size: 1.125rem;
line-height: 1.4rem;
font-weight: 700;
}
.blogTexte .triangle-h1-container{
justify-content: center;
margin-bottom: 3rem;
}
p.blogParag{
margin-top: 2rem;
}
section.blogTexte img{
margin: 40px auto;
display: block;
}
/* -------- Page Articles Blog à partir de 992px -------- */
@media screen and (min-width:62em) {
section.blog-contenu {
background: url(img/bal-a-bahia-fondz-articles-24-fleches.svg), url(img/bal-a-bahia-fondz-articles-25-cible.svg), url(img/bal-a-bahia-fondz-articles-26-marches.svg), url(img/bal-a-bahia-fond-12-cible-droite.svg);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 250px, 350px, 200px, 200px;
background-position: top 5rem left -3rem, center right -8rem, bottom 17rem left, bottom right;
}
}