@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colors */
  --light-orange: #f2d0a9ff;
  --almond: #f1e3d3ff;
  --almondfond: rgba(241, 230, 218, 0.904);
  --crimson: #dc143cff;

  /* General */
  --dark-base: #222;
  --lighter-dark: #333;
  --gray: #858585;
  --light-gray: #d2d2d2;
  --light-white: #f1f1f1;

  /* Active */
  --active-almond: #feecd7;
  --active-light-white: #dedede;
  --active-crimson: #c51337;

  /* Fonts */
  --base-font: Raleway, sans-serif;
  --accent-font: Nunito sans, sans-serif;

  /* Font-size */

  --fs-12: 0.75rem;
  --fs-13: 0.82rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-40: 2.5rem;
  --fs-42: 2.625rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;

  /* shadows */
  --light-solid-shadow: 0 2px 0px #111111cc;
  --solid-shadow: 0 2px 0px #111;
  --shadow-sm: 0 2px 4px rgba(17, 17, 17, 0.502);
  --drop-shadow: 1px 1px 0px #1111114d;

  /* gradients */
  --striped-pinky: repeating-linear-gradient(
      135deg,
      rgba(106, 100, 100, 0.1) 0px,
      rgba(106, 100, 100, 0.1) 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(to right, #f3cdcd, #f4e0bb);
  --light-orange-pinky: linear-gradient(to left, #fcd4d4, #f8d9a0);
  --dark-right : linear-gradient(to bottom right, #252525, #383838);
  --dark-left : linear-gradient(to bottom left, #252525, #383838);
  --radial-white-beige:  radial-gradient(#f1f1f1, #f5f5dc);


  /* borders */
  --light-dark-border: 1px solid var(--lighter-dark);
  --dark-thick-border: 2px solid var(--lighter-dark);
}
/* ///////////  GLOBAL ET UTILISATION ... //////////////////////////*/

body{
  font-family: var(--base-font);
  color:var(--dark-base);
  background-color: var(--light-white);
}
button, input{
  font-family: var(--base-font);
 }

 .container{
  max-width: 1100px;
  margin: 0 auto;
 }
 .main-heading{
  font-size: var(--fs-72);
  line-height: 1.1;
  font-family: var(--accent-font);
  color:var(--light-white);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow:
   0 3px 0px var(--lighter-dark),
   0 4px 0 var(--lighter-dark);
 }
 @media (max-width: 768px) {
  .main-heading{font-size: var(--fs-42);}
  .heading-2{font-size: var(--fs-26);} 
  .surtitle{font-size: var(--fs-16);} 
  }

.heading-2{
  font-size: var(--fs-26);
  font-family: var(--accent-font);
  display: block;
  color: var(--active-crimson);
}
.surtitle, .heading-2{
  text-align: center;
}
.surtitle{
  color:var(--gray);
  font-size: var(--fs-18);
  font-weight: 400;
}
header {
    background-color: #352727;
    padding: 20px;
}

 /*/////////////////////////// NAVIGATION ////////////////////*/

 nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}
/*************** .LOGO ****************/
nav .logo {
    color: #f4f2f3;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: capitalize;
}

/*************** .MENU ****************/
nav .menu {
    display: flex;
    align-items: center;
}
nav .menu ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin-right: 25px;
}
nav .menu ul i {
    opacity: 0;
    transition: opacity 0.5s;
}
nav .menu ul a:hover i {
    opacity: 1;
    margin-right: -25px;
    margin-left: 20px;
}
nav .menu ul span {
    position: relative;
    transition: margin 0.5s;
}
nav .menu ul a:hover span {
    margin-left: 30px;
}
nav .menu ul span::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #94a7ae;
    transition: width 0.5s;
}
nav .menu ul a:hover span::before {
    width: 100%;
}
nav .menu ul a {
    color: #94a7ae;
    text-transform: capitalize;
    font-size: 1.2rem;
    font-weight: 600;
}
nav .menu ul:hover a:not(:hover) {
    filter: blur(1.6px);
}

/*************** .BURGER ****************/
nav .burger,
nav .closed {
    display: none;
}

@media screen and (max-width: 950px) {
    nav .menu {
        position: fixed;
        top: 0;
        left: -100%;;
        width: 100%;
        height: 100%;
        background-color:  #000;

        flex-direction: column;
        justify-content: space-around;

        transition: left 0.5s;
    }
    nav .menu.active {
        left: 0;
    }
    nav .menu ul {
        flex-direction: column;
        gap: 25px;
    }
    nav .closed,
    nav .burger {
        display: block;
        color: #f4f2f3;
        cursor: pointer;
        font-size: 1.5rem;
        transition: transform 0.5s;
    }
    nav .closed:hover,
    nav .burger:hover {
        transform: scale(1.2);
    }
    nav .closed {
        position: absolute;
        top: 20px;
        right: 25px;
    }
}

  /* ////////////////// EN TETE DE SECTION //////////////////////////*/

  .entete-section {
    padding: 145px 10px 10px;
    min-height: 700px;
    background-image: url(RESSOURCES/entete_arriere_plan.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    }
    .Trier{
      min-width: 175px;
      padding: 10px;
      border: none;
      box-shadow: var(--solid-shadow);
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .Trier span{
      text-transform: uppercase;
      font-size: var(--fs-14);
      font-weight: 600px;
    }
    .Trier-1{
      background-color: var(--light-white);
      color: var(--lighter-dark)
    }
      .Trier-2{
      background-color:var(--active-crimson);
      color: var(--light-white);
    }
      .Trier-1:hover{
      background-color:var(--active-almond);
    }
      .Trier-2:hover{
      background-color:var(--lighter-dark);
    }
      .Trier-2{
      margin-left: 10px;
    }
    .Trier img{
      width: 20px;
      margin-left: 10px;
      filter: drop-shadow(--drop-shadow);
    }
    @media (max-width: 768px){
        .entete-section {
          min-height: 550px;
        }
        .Trier{
          min-width: 135px;
          padding: 10px 12px;
        }
        .entete-section span{
          font-size: var(--fs-12);
        }
        .Trier ima{
          width: 14px;
          margin-left: 10px;
        }
    }
    @media (max-width: 600px){
      .entete-section{
        padding-top: 100px;
        border-left: 0px;
        min-height: 450px;

      }
    }
    /*/////////////////  SECTION ACTIVITES /////////////////////////////////////////////*/

    .activities-section{
      padding: 0 10px 62px;
      background-image: var(--striped-pinky);
    }
    .negativ-container{
      transform: translateY(-100px);
      background-color: var(--active-almond);
      border-radius: 25px;
      padding: 40px 25px 112px;
      position: relative;
      box-shadow: var(--shadow-sm);
    }
    .negativ-container, .heading-2{
      margin-bottom: 60px;
    }
    .activity-container{
      max-width: 825px;
      margin: 0 auto;
      min-height: 300px;
      display: flex;
      border-radius: 3px;
      box-shadow: var(--shadow-sm);
      background-image: var(--dark-right);
    }
    .activity-2{
      background-image: var(--dark-left);
    }
    .activity-container:not(.activity-3){
      margin-bottom: 60px;
    }
    .activity-container img{
      width: 40%;
      padding: 25px;
      object-fit: cover;
    }
    .lienArticle{
    text-decoration: none;
    color:var(--active-almond);
}
.lienArticle:hover{
    color:#d2691e;
    text-transform: uppercase;
    text-decoration: underline;
}

/* tableau des articles ......................................*/

    .activity-description{
      display:none; /*display: flex;*/
      grid-template-columns: 90px 200px 10px;
      grid-gap: 5px;
      flex-direction: column;
      padding: 0px 25px 25px;
      color:var(--light-white);
      margin-top: 25px;
      width: 100%;
      }
/*..............................................................*/


    .activity-descriptionajout{
      display:flex;
      grid-template-columns: 120px 1fr;
      grid-gap: 25px;
      flex-direction:column;
      padding: 0px 25px 25px;
      color:var(--light-white);
      margin-top: 25px;
      width: 100%;
      }
/*..............................................................*/

/* Edition des articles   ......................................*/

    .activity-descriptiontraite{
      display:flex;
      grid-template-columns: 120px 1fr;
      grid-gap: 25px;
      flex-direction:column;
      padding: 0px 25px 25px;
      color:var(--light-white);
      margin-top: 25px;
      width: 100%;
   }
/*..............................................................*/

    .activity-heading{
      font-family: var(--accent-font);
      font-size: var(--fs-13);
      margin-bottom: 5px;
      display:flex;
      color:var(--active-almond);
    }

      .activity-heading-1{
      font-family: var(--accent-font);
      font-size: var(--fs-14);
      margin-bottom: 5px;
      display:flex;
      color:var(--almond);
      font-weight: 400;
      padding-left: 10px;
    }
      .activity-heading-2{
      font-family: var(--accent-font);
      font-size: var(--fs-16);
      margin-bottom: 5px;
      display:flex;
      color:var(--light-orange);
      font-weight: 400;
      padding-left: 10px;
    }

    .activity-link1, .activity-link2, .activity-link3, .ferme_article, .ferme_facture, .ferme_ca{
      /*margin-top: auto;*/
      margin:auto 15px 15px 5px;
      /*margin-right: 15px;*/
      min-width: 100px;
      align-self: self-start;
      text-decoration: none;
      text-align: center;
      padding: 5px 7px;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      font-size: var(--fs-14);
      font-weight: 600;
      background-color: var(--light-white);
      color:var(--dark-base);
    }
    .activity-link1:hover, .activity-link2:hover, .activity-link3:hover, .ferme_article:hover, .ferme_facture:hover, .ferme_ca:hover{
      background-color: var(--light-orange);
    }
    @media(max-width: 768px){
      .activities-section{
        padding: 0;
      }
      .negativ-container .heading-2{
        margin-bottom: 35px;
      }
      .negativ-container{
        padding: 30px 10px 90px;
      }
      .activity-container{
        max-width: 500px;
        flex-wrap: wrap;
      }
      .activity-2 .activity-description{
        order: 2;
      }
      .activity-2 img{
        order: 1;
      }
      .activity-container img{
        width: 100%;
        padding: 25px;
      }
    }

/* /////////////////  AJOUT DES ARTICLES  /////////////////////////////////// */

.champs {
	color:#adaf0a;
	font-weight:bold;
	border:1px solid #adaf0a;
	border-radius:10px;
	margin-bottom:15px;
  padding-top: 3px;
  padding-left: 5px;
  padding-right:3px;
}
  .insertext{
	background-image:url(RESSOURCES/millesime.png);
	background-position:left;
	background-repeat:no-repeat;
  padding-left: 50px;
  margin-bottom: 20px;
  margin-left: 5px;
  margin-top: 10px;
}
input[type="text"], input[type="number"], input[type="list"], input[type="date"] {
	width:85%;
	height:30px;
	border-radius:25px;
	border:0;
	background-color:#d5d5d5;
}
.p_label{
  padding-left: 15px;
  color:lavender;
}

/* /////////////////    Parallax      //////////////////////////////////////// */

.parallax {
  min-height: 275px;
  background-image: url(RESSOURCES/entete_arriere_plan.jpg);
  background-position: center;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--light-white);
}
.japanese-text {
  font-size: var(--fs-64);
  line-height: 1.2;
}
.parallax-text {
  font-size: var(--fs-26);
}
@media (max-width: 600px) {
  .parallax {
    min-height: 200px;
  }
  .japanese-text {
    font-size: var(--fs-40);
  }
  .parallax-text {
    font-size: var(--fs-18);
  }
}


/*  //////////////////    Pricing section  ///////////////////////////////// */

.pricing {
  padding: 44px 10px 136px;
  background-image: var(--radial-white-beige);
}

.pricing .heading-2 {
  margin-bottom: 62px;
}

.pricing-cards-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.pricing-card {
  width: 275px;
  min-height: 400px;
  padding: 18px;
  background-color: var(--light-orange);
  border-radius: 5px;
  border: var(--dark-thick-border);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card h3 {
  font-family: var(--accent-font);
  font-size: var(--fs-26);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-line {
  width: 100%;
  margin: 0 10px;
  height: 1px;
  background-color: var(--dark-base);
}
.plan-price {
  font-size: var(--fs-24);
  font-family: var(--accent-font);
  font-weight: bold;
  font-style: italic;
}
.card-subtitle {
  font-size: 14px;
  margin-bottom: 24px;
}
.pricing-card ul {
  margin-bottom: 36px;
}
.pricing-card li {
  list-style-type: none;
  display: flex;
  font-weight: 500;
}
.pricing-card li:not(:last-of-type){
  margin-bottom: 14px;
}
.pricing-card li img{
  width: 20px;
  margin-right: 10px;
}
.pricing-card button {
  margin-top: auto;
  padding: 10px;
  font-size: var(--fs-16);
  font-weight: bold;
  cursor: pointer;
  border: var(--dark-thick-border);
  border-radius: 2px;
  background-color: var(--light-white);
}
.pricing-card button:hover {
  color: var(--light-white);
  background-color: var(--dark-base);
}
.c1 {
  transform: translateY(10px) rotate(-10deg);
}
.c2 {
  transform: translateY(-10px);
  z-index: 2;
}
.c3 {
  transform: translateY(10px) rotate(10deg);
}

.shadow {
  display: flex;
  margin: 20px auto 0;
}

@media (max-width: 900px) {
  .pricing {
    padding-bottom: 60px;
  }
  .pricing .heading-2 {
    margin-bottom: 40px;
  }
  .pricing-cards-container {
    flex-direction: column;
    align-items: center;
  }
  .pricing-card {
    width: 100%;
    max-width: 550px;
    min-height: auto;
    margin-bottom: 25px;
  }
  .pricing-card h3 {
    font-size: var(--fs-22);
  }
  .plan-price {
    font-size: var(--fs-20);
  }
  .card-subtitle {
    margin-bottom: 24px;
  }
  .pricing-card button {
    padding: 8px;
    font-size: var(--fs-14);
  }
  .c1,.c2,.c3 {
    transform: none;
  }
  .c2 {
    order: 3;
  }
  .shadow {
    display: none;
  }
}

/* //////////////////////    Contact    ////////////////////////////////////////*/


.contact {
  padding: 120px 10px;
  background-image: url(RESSOURCES/tradition-japan.jpg);
  background-position: center;
  background-size: cover;
  border-top: var(--dark-thick-border);
}

.rounded-contact {
  margin: 0 auto;
  max-width: 800px;
  background-color: var(--almond);
  padding: 50px 40px 92px;
  border-radius: 25px;
  box-shadow: var(--shadow-sm);
  border: var(--dark-thick-border);
}
.rounded-contact h2 {
  margin-bottom: 44px;
}
.contact-list {
  max-width: 450px;
  margin: 0 auto;
}

.contact-list img {
  width: 30px;

}
.contact-list li {
  border-radius: 5px;
  list-style-type: none;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: var(--light-orange-pinky);
  border: var(--dark-thick-border);
}

.contact-list li:not(:nth-child(3)) {
  margin-bottom: 15px;
}

.contact-list a, .contact-list span {
  font-size:  var(--fs-16);
  color: var(--dark-base);
  font-weight: 700;
}

@media (max-width: 450px) {
  .contact {
    padding: 40px 10px;
  }
  .contact .heading-2 {
    font-size: var(--fs-24);
  }
  .rounded-contact {
    padding: 30px 20px;
  }
  .contact-list li {
    padding: 10px;
  }
  .contact-list a, 
  .contact-list span {
    font-size:  var(--fs-14);
  }
  .contact-list img {
    width: 20px;
  }
}

/* /////////////////////// footer  /////////////////////////////////////*/

footer {
  background-color: var(--light-orange);
  padding: 10px 0;
  text-align: center;
}

footer a {
  text-decoration-color: var(--dark-base);
  color: var(--dark-base);
  text-underline-offset: 4px;
  font-weight: 500;
}