/* @author:LucaGoubelle 🦊*/

:root {
  --grown-main-logo-size: 125px;
  --base-font-size: 16px; --grown-font-size: 20px;
  --pixel-600: 600px; --pixel-800: 800px; --pixel-400: 400px; --pixel-300: 300px; --pixel-200: 200px; --pixel-100: 100px;
  --pixel-1200: 1200px; --pixel-900: 900px; --pixel-50: 50px; --pixel-25: 25px;
  --border-radius-default: 15px;
  --delay-default: 0.3s; 
  --offset-10: 10%;
  --vert-scumessa: #00B478; --color-hover-button: rgb(0,200,0); --amber: #ffbb00; --emerald: #009978;
}

body {
    font-family: Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* ###########################
######## NAVIGATE RULES ######
############################## */

.returnNav { transition-property: height, font-size; }
.returnNav:hover { background-color: var(--color-hover-button) !important; height: 70px; }

.collapseLink, .themeHandler, .navPillsLink, .returnNav {
    font-size: var(--base-font-size); transition-duration: var(--delay-default);
}
.collapseLink:hover, .themeHandler:hover, .navPillsLink:hover, .returnNav:hover { font-size: var(--grown-font-size); }

.collapseLink, .themeHandler, .navPillsLink { transition-property: font-size; }

/* #######################################
######## COLORS / VISIBILITY RULES #######
########################################## */

.invisible_point { visibility: hidden; }

.shadowGrey, .cardGroupe, 
.navPillsBar, .navigateBar,
.imgVerySmallPortrait, .imgVerySmall { box-shadow: 10px 5px 5px grey;}

.navigateBar, .gradient_header2, .gradient_animation { background: linear-gradient(to right, var(--amber), var(--emerald)); }

.contactFrame { font-size: 24px; text-align: left; margin-left: var(--pixel-100); }

.navigateBar2, .contactFrame, .sectionEvenement { color: black; }
.colorWhite, .legend_map2, .footerPage, .avisSection { color: white; }

.bg_location {  border: 5px solid rgb(0,220,200); }

/* hex: #00B478 */
.vert_scumessa_bg { background-color: var(--vert-scumessa); }
.gradient_header, .gradient_header2 { opacity: 0.7; }
.gradient_header { background-color: rgb(221, 220, 143); }

.opaC { opacity: 1; }
.pinkSwitch { border: 2px solid #ee00ee; }
.pinkSwitch:checked { background-color: rgb(255,0,255); }

.navPillsLink:hover, .bg_location,
.navigateBar2, .contactFrame, 
.sectionWhite, .sectionEvenement, body { background-color: white; }

.legend_map2, .footerPage { background-color: rgb(62,62,62); }
.avisSection {background-color: var(--emerald);}
.sectionAnim { background-color: rgb(38, 201, 133); }

/* ######################################
####### BORDER / RADIUS rules ###########
#########################################*/

.sectionWhite, .sectionEvenement, .sectionAnim, 
.navPillsBar, .navigateBar, #map,
.imgSemiSmall, .imgDefaultRounded,
.imgSmallRounded, .imgPortraitSmallRounded,
.imgVerySmallPortrait, .imgVerySmall,
.legend_map2, .cardGroupe, .imgReverseShop, .avisSection { border-radius: var(--border-radius-default); }
.imgCarousel, #mapLocation, .gradient_animation { border-radius: var(--pixel-25); }
.sectionEvenement { border: 1px solid black; }
.imgPortraitSmallRoundedLeft {
    border-top-left-radius: var(--border-radius-default);
    border-bottom-left-radius: var(--border-radius-default);
}
.imgPortraitSmallRoundedRight {
    border-top-right-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
}
.imgPortraitSmallRoundedTopLeft { border-top-left-radius: var(--border-radius-default);}
.imgPortraitSmallRoundedBottomLeft { border-bottom-left-radius: var(--border-radius-default); }
.imgPortraitSmallRoundedTopRight { border-top-right-radius: var(--border-radius-default); }
.imgPortraitSmallRoundedBottomRight { border-bottom-right-radius: var(--border-radius-default); }

/* ######################################
####### WIDTH / HEIGHT rules ############
#########################################*/

#map, .legend_map2 { width: 70%; height: 70%; }
html,body{ width: 100%; height: 100%; }
.carousel-img {
    height: 600px;        /* hauteur fixe identique pour toutes */
    object-fit: cover;    /* recadre sans déformer */
}

/* WIDTH */
.networkLogo { width: var(--pixel-50); }
.mainLogo { width: var(--pixel-100); }
.animateBtn { width: 110px; }
.heroesButton { width: 120px; }
.partenaireLogo { width: 150px; }
.navBar, .imgVerySmall { width: var(--pixel-300); }
.imgPortraitSmall, .imgPortraitSmallRounded, 
.imgPortraitSmallRoundedTopLeft, .imgPortraitSmallRoundedTopRight, 
.imgPortraitSmallRoundedBottomLeft, .imgPortraitSmallRoundedBottomRight, 
.space_right_carousel, .space_between_side, .sectionEvenement { width: var(--pixel-400); }
.imgReverseShop { width: 425px;}

.imgDefault, .imgDefaultRounded, #mapLocation { width: var(--pixel-800); }
.secondLogo, .imgVerySmallPortrait, .returnNav { width: var(--pixel-200); }
.space_left_carousel, .imgSmall, .imgSmallRounded { width: var(--pixel-600); }
.space_middle_navbars { width: 1400px; }
.space_contacts_networks { width: var(--pixel-100); }
.space_between_networks { width: var(--grown-font-size); }
.space_between_logo_title { width: 15px; }
.space_table_ajust { width: 30px; }
aside { width: 90%; }
.carousel-img, .navPillsBar { width: 100%; }
.staticCarousel {width: 70%;}

/* HEIGHT */
.animateBtn { height: 40px; }
.vertical_space, .networkLogo, .returnNav, .heroesButton { height: var(--pixel-50); }
.partenaireLogo, .mainLogo { height: var(--pixel-100); }
.large_vertical_space { height: 180px; }
.secondLogo, .imgVerySmall { height: var(--pixel-200); }
.imgVerySmallPortrait { height: var(--pixel-300); }
.imgSmall, .imgSmallRounded, .gradient_header2 { height: var(--pixel-400); }
.imgReverseShop { height: 225px;}
#mapLocation, .imgPortraitSmall, .imgPortraitSmallRounded, 
.imgPortraitSmallRoundedTopLeft, .imgPortraitSmallRoundedTopRight, 
.imgPortraitSmallRoundedBottomLeft, .imgPortraitSmallRoundedBottomRight { height: var(--pixel-600); }
.sectionEvenement { height: 700px; }
.vertical_space_20 { height: var(--grown-font-size); }
.footerPage { height: 250px; }

/* ##########################
####### SPACING RULES #######
#############################*/

.imgVerySmallPortrait {margin: 20px;}
.sectionEvenement {margin-left: 10px; }
.navigateBar { margin-right: 10px; }
.sectionWhite, .sectionAnim, .gradient_animation, .avisSection {margin-left: var(--offset-10); margin-right: var(--offset-10);}
.sectionPartnair { text-align: center; position: relative; margin-left: 350px; }
.carrousel-bloc { margin-bottom: 2rem; }
.text_up_carousel { margin-left: 160px;}
.footerExtra { margin-right: 500px; }

.map_content { background-repeat: no-repeat; background-size: auto; }
.points_map { position: absolute; z-index: 2; }

article { float: left; width: 55%; }
section::after { content: ""; display: table; clear: both; }

@media screen and (max-width: 710px){ .bg_location { margin-left: var(--pixel-300); margin-right: var(--pixel-400); }}

#map, .legend_map2/*, .tbl_partenaire*/ {margin-left: var(--pixel-400);}

/*.tbl_furnitures { margin-left: var(--pixel-200); }*/
.tbl_location { margin-left: var(--pixel-100); }
.legend_map2 { margin-top: -20px; }
.formLegend { padding-left: var(--pixel-25); padding-right: var(--pixel-25); }
.avisSection {padding: 3em;}
.legendTitle { text-align: center; }

/*#######################################
######## ANIMATION RULES ################
#########################################*/

.animateBtn, .heroesButton, .mainLogo, .secondLogo, .networkLogo {
    transition-duration: var(--delay-default), var(--delay-default);
}
.mainLogo, .secondLogo, .networkLogo { transition-property: width, height; }
.animateBtn, .heroesButton {
    transition-property: width, height, font-size;
    font-size: var(--base-font-size);
}
.heroesButton:hover, .animateBtn:hover {
    background-color: var(--color-hover-button);
    border: 2px solid var(--color-hover-button);
    font-size: var(--grown-font-size);
}

.networkLogo:hover { width: 65px; height: 65px; }
.secondLogo:hover {width: 225px; height: 225px;}
.mainLogo:hover { width: var(--grown-main-logo-size); height: var(--grown-main-logo-size); }
.animateBtn:hover { width: 120px; height: var(--pixel-50); }
.heroesButton:hover { width: 150px; height: 70px; }

/*#################################
## OTHER DEVICES ##################
###################################*/

/* Tablette */
@media (max-width: 1024px) {
    
}

/* Mobile */
@media (max-width: 768px) {
  
}