/*
Theme Name: La Resistance
Theme URI: https://lnweb-services.com
Author: Loane Nguyen
Author URI: https://lnweb-services.com
Description: Thème pour le site La Résistance
Requires at least: 6.4.2
Version: 1.6.1
*/

/* global variables */
:root {
    --corail: #BB525F;
    --green: #81A689;
    --dark-green: #4E6553;
    --dark-grey: #444444;
    --grey: #717270;
    --light-grey: #a6a6a6;
}

/* colors */
.txt-corail-color		{color:				var(--corail);}
.bg-corail-color		{background-color:	var(--corail);}
.border-corail-color	{border-color:		var(--corail);}

.txt-green-color		{color:				var(--green);}
.bg-green-color		    {background-color:	var(--green); color: white}
.border-green-color	    {border-color:		var(--green);}

.txt-grey-color		    {color:				var(--grey);}
.bg-grey-color		    {background-color:	var(--grey);}

/* flex */
.container{
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

.section{
    width: 100vw;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* body */
html, body {
    font-family: "Gill Sans", Tahoma, sans-serif;
    color: var(--dark-grey);
    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* containers */ 
.inner-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 150px;
    gap: 40px;
}

.z-index-minus {
    z-index: -1;
}

.single-post {
    padding: 0 100px 100px 100px;
}

/* titles */
h1 {
    font-size: 1.7em;
    color: var(--dark-green);
    margin: 0;
    padding: 30px 0;
}

h2 {
    font-size: 2em;
}

h3 {
    font-weight: 600;
    font-size: 1.5em;
}

h4 {
    font-size: 1.4em;
    color: var(--dark-green);
}

.txt-thin{
    font-weight: 200;
    font-size: 15px;
}

p {
    font-weight: 300;
    padding: 10px 0;
    margin: 0;
}

span {
    line-height: 1.5em; 
    font-weight: 500;
    margin: 0;
}


/* lists and links */

ul {
    list-style: none;
    margin-bottom: 0;
}

ul li {
    padding: 0 30px;
}

a {
    text-decoration: none;
    color: var(--dark-grey);
}

a:hover {
    color: var(--corail);
}

/* images */
.illustration{
    width: 100%;
    height: auto;
}

.illustration-banner{
    width: 60vw;
    height: auto;
}

.border-green path {
    fill: var(--green);
}

.border-corail path {
    fill: var(--corail);
}

/* paddings */
.p-150 {
    padding: 50px 150px 0 150px;
}

/* header */
.navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px;
}

#menu-menu-principal, #menu-menu-principal-anglais {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.logo-header{
    height: auto;
    width: 200px;
    padding: 10px 30px;
}

#menu-items{
    z-index: 1;
}

/* footer */

#menu-footer .menu-item a, #menu-footer-anglais .menu-item a {
    font-weight: 400;
    text-decoration: none;
    color: white;
}

#menu-footer .menu-item a:hover, #menu-footer-anglais .menu-item a:hover {
    font-weight: 600;
    color: white;
    transition: all 0.5s ease;
}

#site-footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--corail);
    color: white;
    padding: 30px 100px 10px 100px;
}

.footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-footer{
    height: auto;
    width: 150px;
}

.copyright{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    background-color: #ededed;
    color: var(--grey);
    margin: 0;
}

.footer-left, .footer-right{
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

/* buttons */
.btn-container {
    padding: 40px;
}

.btn {
    background-color: white;
    border: 1px solid var(--grey);
    padding: 10px 30px;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
}

.btn:hover {
    background-color: var(--dark-green);
    color: white;
}

.button-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    background: var(--dark-green);
    color: #fff;
    font-size: 26px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }

.button-top-visible {
opacity: 1;
pointer-events: auto;
}

/* illustrations */
.illustration-end-page {
    padding: 0;
}

.illustration-end-page img {
    width: 100vw;
}

img {
    width: 100%;
    height: auto;
}

/* animations */
.lineUp {
    animation: 2s anim-lineUp ease-out 1;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* Homepage */

#hero-banner {
	position: relative;
    top: -140px;
    padding-right: 50px;
}

#philosophie, #philosophy {
    flex-direction: column;
    background-color: var(--corail);
    color: white;
    padding-top: 0;
	position: relative;
	top: -140px;
}

#savoir-faire, #expertise {
	position: relative;
	top: -100px;
    padding: 10px 50px;
}

#recompenses, #gammes, #ranges {
	position: relative;
	top: -80px;
}

#recompenses, #gammes, #groupe-union, #ranges {
    flex-direction: column;
    gap: 0;
}

.recompense-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.recompense-container  div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    width: 25%;
}

#groupe-union {
    flex-direction: column;
    padding: 100px 20vw;
    gap: 40px;
}

#gammes, #ranges {
    flex-direction: column;
    gap: 0;
}

.bloc-vin {
    display: flex;
    flex-direction: row;
    background-color: var(--green);
    color: white;
    padding: 40px;
    align-items: center;
    justify-content: center;
} 

.bloc-vin-alternate {
    display: flex;
    flex-direction: row;
    background-color: white;
    padding: 40px;
    align-items: center;
    justify-content: center;
} 

.visuel-vin-highlight {
    display: flex;
    justify-content: center;
    margin-top: -250px;
}

.visuel-vin, .visuel-savoir-faire {
    display: flex;
    justify-content: center;
}

.visuel-savoir-faire {
	width: 50%;
}

.illustration-presentation-vins {
	display: flex;
	width: 100%;
    position: relative;
    top: 60px;
    z-index: -1;
    left: 300px;
}

.description-vin, .description-savoir-faire {
    display: flex;
    flex-direction: column;
    padding: 40px;
    width: 50%;
}


/* Contact */
#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-form{
    display: flex;
    flex-direction: column;
    width: 80%;
}

/* Cookies page */
#cmplz-document { max-width: 90vw;}
#cmplz-document, #cmplz-document p, #cmplz-document li { font-size: 20px !important; text-align: justify !important;}
#cmplz-document h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h2, .editor-styles-wrapper .cmplz-unlinked-mode h3 { font-family: "Gill Sans", Tahoma, sans-serif !important; font-size: 25px !important;}
.text-justify{ text-align: justify !important;}

/* desktop (rem) base size */
@media ( min-width: 1467px ) { 
    html, body { font-size: 22px; }
}

/* laptop (rem) base size */
@media ( max-width: 1466px ) {
     html, body { font-size: 20px; } 
}

@media ( max-width: 1275px  ) { 
    #hero-banner { flex-direction: column-reverse; padding: 0;}
    #hero-banner, #philosophie, #savoir-faire, #recompenses, #vins, #philosophy, #expertise { top: 0; }
    #section-1-texte { text-align: center; padding: 0 150px}
    #savoir-faire, #expertise { flex-direction: column; }
    .description-vin { width: 70%;}
    .description-savoir-faire { width: 100%; text-align: center; padding: 40px;}
    #recompenses { padding: 40px;}
    #groupe-union {padding: 50px 20vw;}
}

/* tablets (rem) base size */
@media ( max-width: 991px ) {
    /* header nav */
    .navbar { flex-direction: column; align-items: center; justify-content: space-around; gap: 20px}
    #menu-items { flex-direction: column; align-items: center; padding: 20px 0; font-size: 25px; gap: 30px}
    #menu-menu-principal .menu-item, #menu-menu-principal-anglais .menu-item { padding: 10px; text-align: center;}
    .logo-header { width: 450px;}
    /* footer */
    #site-footer .container { padding: 20px 70px}
    .footer { padding: 10px 0}
    /* titles */
    h1 { padding: 20px 0;}
    /* footer */
    .footer-left{ width: 50%;}
    /* homepage */
    .inner-section{ flex-direction: column; align-content: center; gap: 30px; padding: 50px;}
    #savoir-faire { flex-direction: column-reverse; }
	#savoir-faire img { min-width: 80vw}
    #section-1-texte { padding: 30px;}
    #illu-1 img { display: none;}
    .recompense-container div { padding: 20px; width: 30%}
    #groupe-union {padding: 50px 10vw;}
	.illustration-presentation-vins { left: 0;}
    /* contact */
    .section-form { width: 100%; padding: 30px;}
    .section-text { width: 100%; padding: 30px;}
}

/* mobile (rem) base size */
@media ( max-width: 700px  ) { 
    h2 { font-size: 1.8em;}
    h2, p { text-align: center;}
    h3 { font-size: 1.3em; }
    .section { gap: 0;}
    #menu-menu-principal, #menu-menu-principal-anglais { flex-direction: column;}
    #navbarToggler { min-height: 50vh; flex-direction: column; }
    /* Footer */
    #site-footer .container { padding: 20px 30px; }
    .footer-left, .footer-right { width: 100%; padding: 20px}
    #menu-footer, #menu-footer-anglais { padding: 0;}
    .footer-left p { text-align: start;}
    .copyright { text-align: center; padding: 10px 30px}
    /* Homepage*/
    .description-savoir-faire { padding: 30px 0;}
    .recompense-container, .bloc-vin { flex-direction: column; align-items: center;}
    .bloc-vin-alternate { flex-direction: column-reverse;}
    .recompense-container div { width: 70%;}
    .visuel-vin-highlight { margin-top: -150px;}
    .description-vin { width: 100%; padding: 10px;}
    /* Contact */
    #contact { padding: 10px;}
}