@import url('https://fonts.googleapis.com/css2?family=Kolker+Brush&display=swap');

    /* Body */

    body {
      background-image     : url('https://images.pexels.com/photos/214050/pexels-photo-214050.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
      background-position  : top;
      background-size      : cover;
      background-repeat    : no-repeat;
      background-attachment: fixed;
      margin               : 0;
      padding              : 0;
      display              : flex;
      flex-direction       : column;
      min-height           : 100vh;
      box-shadow           : inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
      /* Assure que le body occupe au moins la hauteur de l'écran */
    }

    /* Css global */
    .container-height {
      min-height: 100vh;
    }



    /* Section admin */

    #index_admin {
      display        : flex;
      align-items    : center;
      justify-content: center;
      height         : 100%;
    }

    #index_admin h1 {
      margin    : 0 0 30px 0;
      text-align: center;
      color     : #FFC107;
    }

    #index_admin ul {
      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-between;
      width          : 60%;
      margin         : auto;
    }

    #index_admin ul li {
      margin          : 20px;
      padding         : 10px;
      background-color: #000000;
      list-style      : none;
    }

    #index_admin ul li a {
      text-decoration: none;
      color          : #FFC107;
    }

    #index_admin ul li:hover {
      text-decoration : dashed;
      background-color: #FFC107;

      a {
        color: #000000;
      }
    }

    /* Page Login */

    .form-login {
      color : white;
      width : 700px;
      margin: auto;
    }

    .btn-center {
      display        : flex;
      justify-content: center;
    }

    .form-login h1 {
      color          : #FFC107;
      margin         : 0 0 40px 0;
      text-align     : center;
      text-decoration: underline;
    }

    .form-login input {
      margin: 20px 0;
    }

    /* CSS sous conditions */

    /* background de page accueil et différentes catégories + pages details */

    .achat-accueil::before {
      content              : "";
      /* Remplacez par le chemin de votre image */
      background-repeat    : no-repeat;
      background-size      : cover;
      background-attachment: fixed;
      position             : fixed;
      top                  : 0;
      left                 : 0;
      width                : 100%;
      height               : 100%;
      z-index              : -1;
      /* Assure que l'image est en arrière-plan du contenu */
    }

    .achat-accueil {
      background-repeat    : no-repeat;
      background-size      : cover;
      background-attachment: fixed;
      padding-bottom       : 50px;
    }

    .achat-accueil-plantes {
      background-image: url('../images/fonds/fond-plantes.jpg');
      /* height       : fit-content; */
      box-shadow      : inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    }

    .achat-accueil-graines {
      background-image: url('../images/fonds/fond-graines.jpg');
      box-shadow      : inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    }

    /* legumes */

    .achat-accueil-legumes {
      background-image: url('../images/fonds/fond-legumes.jpg');
      box-shadow      : inset 0 0 0 1000px rgba(0, 0, 0, 0.5);

    }

    .achat-accueil-fruits {
      background-image: url('https://img.pikbest.com/wp/202345/fruit-collection-wallpapers_9583637.jpg!w700wp');
      box-shadow      : inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    }


    /* Home */

    .banner {
      height         : 250px;
      display        : flex;
      justify-content: center;
      align-items    : center;
      flex-direction : column;
    }

    .banner h1 {
      text-shadow: 15px 12px 4px rgba(0, 0, 0, 0.603);
      font-family: 'Kolker Brush', cursive;
      font-size  : 70px;
      color      : #FFC107;
    }

    .main-produits {
      display        : flex;
      justify-content: space-around;
      flex-wrap      : wrap;
      margin-bottom  : 150px;
    }

    .main-produits a {
      text-decoration: none;
      color          : black;
      font-size      : 66px;
      text-shadow    : 8px 5px 3px #FFC107;
    }

    .produits {
      background-color: black;
      height          : 250px;
      width           : 600px;
      margin          : 10px;
      display         : flex;
      justify-content : center;
      align-items     : center;
    }

    .produits:hover {
      transform : scale(1.1);
      transition: 1.5s;
      z-index   : 1;
    }

    .produits:not(hover) {
      transform : scale(1);
      transition: 1.5s;
    }

    .main-produits>a:nth-child(1)>.produits {
      background-image   : url('../images/fonds/presentation-plantes.jpg');
      background-repeat  : no-repeat;
      background-size    : cover;
      background-position: center;
    }

    .main-produits>a:nth-child(2)>.produits {
      background-image   : url('../images/fonds/presentation-graines.webp');
      background-repeat  : no-repeat;
      background-size    : cover;
      background-position: center;
    }

    .main-produits>a:nth-child(3)>.produits {
      background-image   : url('../images/fonds/presentation-legumes.webp');
      background-repeat  : no-repeat;
      background-size    : cover;
      background-position: center;
    }

    .main-produits>a:nth-child(4)>.produits {
      background-image   : url('../images/fonds/presentation-fruits.jpg');
      background-repeat  : no-repeat;
      background-size    : cover;
      background-position: center;
    }

    /* NavBar */

    nav {
      background-repeat    : no-repeat;
      background-size      : cover;
      background-attachment: fixed;
    }


    nav h2 {
      text-shadow: 15px 12px 4px rgba(0, 0, 0, 0.603);
      font-family: 'Kolker Brush', cursive;
      font-size  : 55px;
    }

    nav h2 a {
      margin-left: 55px;
    }

    .mainmenubtn {
      background-color: transparent;
      color           : #FFC107;
      border          : none;
      cursor          : pointer;
      margin-right    : 25px;
    }

    .dropdown {
      position: relative;
      display : inline-block;
    }

    .dropdown-child {
      display: none;
    }

    .dropdown-child ul {
      color          : #FFC107;
      text-decoration: none;
      display        : block;
    }

    .dropdown:hover .dropdown-child {
      display: block;
    }

    .categories {
      display   : flex;
      text-align: center;
    }

    .categories a {
      background-color: black;
    }

    #url_panier {
      cursor: pointer;
    }

    /* Partie card achats.html.twig */
    .produits-categories {
      display        : flex;
      justify-content: center;
    }

    .titre-plante {
      display       : flex;
      flex-direction: column;
    }

    .titre-plante h3 {
      text-align: center;
      color     : #FFC107;
      margin    : 20px 0;
    }

    .titre-site {
      color      : #FFC107;
      text-shadow: 4px 3px rgba(0, 0, 0, 0.603);
    }

    #relative-div {
      position: relative;
      display : flex;
      width   : 550px;
    }

    #relative-div form {
      width          : 420px;
      display        : flex;
      align-items    : center;
      justify-content: space-between;
    }

    #relative-div form a {
      font-size       : 1rem;
      background-color: #FFC107;
      border          : 1px solid black;
      padding         : 8px 7px;
      border-radius   : 10%;
      vertical-align  : middle;
      text-decoration : none;
      color           : black;
    }

    .rechercher {
      background-color: #FFC107;
      border-color    : #FFC107;
    }

    #plante_search {
      background-color: #000000;
      border-radius   : 20px;
      border          : none;
      color           : #FFC107;
      padding         : 0 0 0 5px;
      text-align      : center;
    }

    #plante_search::placeholder {
      color: #FFC107;
    }

    #plante_search:focus::placeholder {
      color: transparent;
    }



    #relative-div form a:hover,
    #relative-div form button:hover {
      background-color: #212529;
      color           : white;
      transition      : 1.5s;
      border-color    : black;
    }

    .plantesResults {
      box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.603);
    }

    #plante_search_search {
      padding: 5px 10px;
    }

    .relative-div-achats {
      position        : relative;
      background-color: #212529;
      color           : white;
    }

    .ajouter_panier_icon {
      cursor   : pointer;
      position : absolute;
      bottom   : 100px;
      left     : 0;
      padding  : 3px 7px;
      color    : #000000;
      font-size: 30px;
    }

    .selected_cart {
      color: red !important;
    }

    .absolute-prix {
      position        : absolute;
      background-color: #212529;
      color           : #FFC107;
      border-radius   : 50%;
      padding         : 5px;
      width           : 50px;
      height          : 50px;
      display         : flex;
      align-items     : center;
      text-align      : center;
      font-size       : 13px;
      font-weight     : bold;
      right           : 0;
      top             : 0;
      justify-content : center;
    }

    #btn-btn:hover {
      background-color: #FFC107;
      border-color    : transparent;
    }

    #btn-btn img {
      width         : 25px;
      vertical-align: middle;
    }


    .img-card {
      height: 300px;
    }

    .img-card img {
      width : 100%;
      height: 300px;
    }

    .change-btn:hover {
      background: #212529;
      transition: 2s;
      color     : white;
    }

    /* Hors stock */
    #hors-stock {
      position : absolute;
      top      : 30%;
      color    : red;
      left     : 10%;
      font-size: 40px;
      width    : 100%;
      transform: rotate(45deg);
    }

    .img-hors-stock {
      filter: brightness(40%);
    }

    /* PAGE INSCRIPTION */
    .formInscription {
      width     : 500px;
      height    : 600px;
      margin    : 30px auto;
      text-align: center;
      color     : #FFC107;
    }

    .formInscription h1 {
      text-decoration: underline;
    }

    .formInscription form {
      display        : flex;
      flex-direction : column;
      justify-content: space-between;
    }

    .formInscription form #register_form {
      align-items: center;
    }

    .formInscription form #register_form div {
      align-items: center;
      width      : 200px;
      margin     : 10px auto;
    }

    .formInscription label {
      margin: 10px 0;
      width : 100%;
    }

    #next,
    #previous {
      position           : absolute;
      color              : #FFC107;
      /* background-color: #212529; */
      font-size          : 25px;
    }

    #next {
      bottom: 50px;
      right : 500px;
    }

    #previous {
      bottom: 50px;
      left  : 500px;
      width : calc(100% - 500px);
    }

    .relative {
      flex    : 1;
      position: relative;
    }

    .mdp_show {
      display    : flex;
      align-items: center;
    }

    .mdp_show i {
      cursor: pointer;
    }

    #moyenne_notes{
      display: flex;
      justify-content: flex-end;
    }

    #link_avis_home{
      cursor: pointer;
      text-decoration: none;
      color: white;
    }

    /* FIN PAGE INSCRIPTION */


    /* Page Details */
    .absolutePrix {
      position     : absolute;
      top          : 20px;
      left         : 570px;
      padding      : 20px;
      border-radius: 50%;
    }

    .details-img {
      display        : flex;
      justify-content: center;
    }

    .detail-img {
      height: 350px;
      width : 400px;
      margin: auto;
    }

    .detail-img img {
      height: 100%;
    }

    .add_image {
      color       : #FFC107;
      display     : block;
      margin      : 1rem 0 0 0;
      padding-left: 1rem;
    }

    .add_image button {
      margin-top: 10px;
      height    : 30px;
    }

    .carousel-control-next {
      right: 220px;
    }

    .carousel-control-prev {
      left: 220px;
    }

    .carousel-control-prev span {
      background-color: black;
    }

    .carousel-control-next span {
      background-color: black;
    }

    .accordion-item,
    .accordion-button,
    .accordion-body {
      background-color: transparent;
    }

    #ajouter_panier_link,
    .link-supp {
      cursor: pointer;
    }

    #ajout-panier {
      width     : 400px;
      margin    : auto;
      text-align: center;
    }

    /* FIN PAGE DETAILS */


    /* PARTIE PANIER */

    table.table tr,
    table.table th,
    table.table td {
      color           : #FFC107;
      background-color: transparent;
    }

    table.table td a {
      text-decoration : none;
      color           : #FFC107;
      border          : 2px solid black;
      background-color: rgba(0, 0, 0, 0.671);
    }

    .delete_article img {
      width: 200px;
    }

    #commander {
      cursor: pointer;
    }

    /* Panier vide */

    .panier-vide-div {
      display        : flex;
      flex-direction : column;
      height         : 93vh;
      align-items    : center;
      justify-content: center;
    }

    .panier-vide-div a {
      font-size: 33px;
      color    : red;
    }


    /* FIN PARTIE PANIER */


    /* PARTIE COMMANDE */

    .recap {
      width           : 700px;
      margin          : 30px auto;
      border          : 3px solid black;
      background-color: #00000080;
    }

    .recap h1 {
      text-align: center;
      color     : #FFC107;
    }

    .recap h2 {
      text-align: center;
      color     : #FFC107;
      padding   : 30px 0;
    }

    .ttG {
      width     : 25%;
      text-align: right;
    }

    .td-quantite,
    .td-prix {
      text-align: right;
    }

    /* Paiement */
    .paiements {
      margin          : auto;
      width           : 500px;
      height          : 500px;
      background-color: rgba(0, 0, 0, 0.651);
      color           : #FFC107;
    }

    .paiements {
      padding: 20px;
      border : 3px solid white;
    }

    /* adresse livraison */
    .livraison_factureh3 {
      color     : #FFC107;
      text-align: center;
    }

    .livraison_facture {
      color: #FFC107;
    }

    .livraison_facture p {
      margin: 2px 0;
    }

    .adresse_link {
      margin: 30px 0;
    }

    .modif-adresse {
      color: #FFC107;
    }

    .paiement_div {
      margin         : 50px 0;
      display        : flex;
      justify-content: center;
    }

    .paiement_links {
      color  : #FFC107;
      padding: 5px 20px;
    }

    .paiement_links img {
      width: 150px;
    }

    /* Page adresse Livraison */

    .adresse_livraison,
    .adresse_facture {
      display         : flex;
      flex-direction  : column;
      width           : 600px;
      margin          : 20px auto;
      background-color: #2125299c;
      color           : #FFC107;
    }

    .adresse_livraison h1,
    .adresse_facture h1 {
      font-size    : 26px;
      text-align   : center;
      margin-bottom: 40px;
    }

    .adresse_facture,
    .adresse_livraison form,
    #adresse_livraison,
    #adresse_facture {
      height        : 100%;
      display       : flex;
      flex-direction: column;
    }

    #adresse_livraison>div,
    #adresse_facture>div {
      display        : flex;
      justify-content: space-between;
      align-items    : center;
      width          : 450px;
      margin         : auto;
    }

    #adresse_livraison>div>button,
    #adresse_facture>div>button {
      margin: auto;
    }

    #adresse_livraison>div>select,
    #adresse_livraison>div>input,
    #adresse_facture>div>select,
    #adresse_facture>div>input {
      width: 150px;
    }

    #adresse_livraison>div>textarea {
      margin-left: 10px;
    }

    .adresse_livraison_facture {
      display        : flex;
      justify-content: space-between;
      align-items    : center;
      text-align     : center;
    }

    .adresse_livraison_facture>div:not(.adresse_vierge) {
      height         : 300px;
      display        : flex;
      flex-direction : column;
      justify-content: space-between;
      width          : 50%;
      margin         : auto;
    }

    /* Dans le cas où aucune adresse n'a été renseignée */
    .adresse_vierge {
      display        : flex;
      align-items    : center;
      justify-content: space-around;
      width          : 100%;
    }

    /* Page historique commandes  */

    .historiqueH1 {
      color           : #FFC107;
      text-align      : center;
      margin          : 30px 0 0 0;
      padding         : 30px 0;
      background-color: #000000;
      border-bottom   : 2px solid white;
    }

    /* Historique vide */

    .historiqueVide {
      display        : flex;
      flex-direction : column;
      height         : 700px;
      align-items    : center;
      justify-content: center;
    }

    .historiqueVide h1 {
      color: #FFC107;
    }

    .historiqueVide a {
      font-size : 23px;
      color     : red;
      margin-top: 20px;
    }


    /* Page Infos utilisateur */

    .modifInfos {
      cursor: pointer;
    }

    #div-infos-perso h1 {
      margin: 30px 0;
    }

    #div-infos-perso>div {
      padding: 10px;
    }

    /* changement mdp */

    #div-mdp {
      display: none;
    }

    .container>div>h1 {
      text-align: center;
      color     : #FFC107;
    }

    .container>div>div:not(#confirm-infos) {
      color           : #FFC107;
      background-color: #00000048;
      display         : flex;
      margin          : 10px;
      justify-content : space-between;
      width           : 400px;
      margin          : auto;
    }

    .container>div>div#div-mdp {
      justify-content: center;
    }

    .container>div>div>a {
      color: white;
    }

    #confirm-infos {
      width : 350px;
      margin: auto;
    }

    /* Page legalite */

    .legalite-div {
      color     : #FFC107;
      text-align: justify;
      width     : 1000px;
      margin    : 20px auto;
    }

    .legalite-div h1 {
      text-align: center;
      margin    : 20px 0;
    }

    .legalite-div h2 {
      margin: 10px 0;
    }


    /* Page Footer */

    footer {
      /* background-color: transparent; */
      padding              : 10px;
      background-repeat    : no-repeat;
      background-size      : cover;
      background-attachment: fixed;
      color                : #FFC107;
    }

    footer>div {
      width : 100%;
      margin: 10px 0;
    }

    .middle-footer p {
      margin-left  : 20px;
      margin-bottom: 0;
    }

    .nav-footer {
      width: 100%;
    }

    .nav-footer>nav>ul {
      display        : flex;
      justify-content: space-around;
      margin-bottom  : 0;
    }

    .nav-footer>nav>ul>li {
      list-style-type: none;
    }

    .nav-footer>nav>ul>li>a {
      color: inherit;
    }


    /* Page Avis */
    .avis_div{
      display: flex;
      justify-content: space-evenly;
    }
    #image_produit_avis{
      width: 25%;
      img{
        width: 100%;
      }
    }

    #text_produit_avis{
      width: 75%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .titre_avis{
      margin-bottom: 50px;
      color: #FFC107;
      text-decoration: underline;
    }

    .avis_notes {
     text-align: center;
    }
    .avis_notes p:last-child{
      border: 1px solid black;
      /* background-color: #212529; */
      height: 130px;
      width: 75%;
      margin: auto;
      overflow-wrap: break-word;
      text-align: justify;
      overflow-x: auto;
    
    }

    /* MEDIAS QUERIES */
    /* entre tablette et desktop */

    @media (max-width: 1600px) {
      .absolutePrix {
        position     : absolute;
        top          : 20px;
        left         : 480px;
        padding      : 15px;
        border-radius: 50%;
      }

      .absoluteNext {
        right: 150px;
      }

      .absolutePrev {
        left: 150px;
      }

      #next {
        bottom: 10px;
        right : 30px;
      }

      #previous {
        bottom: 10px;
        left  : 30px;
      }
    }

    @media (max-width: 1168px) {

      /* NAVBAR ET ACHATS */

      #relative-div {
        display   : block !important;
        text-align: center;
        width     : 100%;
      }

      .navbar-brand {
        display: none;
      }

      .navbar h2 {
        font-size: 35px;
      }

      .titre-plante h2 {
        font-size: 16px;
      }

      #relative-div {
        width: 25%;
      }

      .btn-hamburger {
        background-color: #FFC107;
      }

      /* Panier */

      .panier-vide-div h1 {
        font-size: 30px;
      }

      .table_panier {
        display: none;
      }

      .mobile_panier {
        display: flex;
      }

      .img_panier_mobile {
        width: 25%;
        height: 200px;
        margin: 30px;

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

      .text_panier_mobile {
        margin: 30px;
      }
    }

    /* Tablettes */
    @media (max-width: 768px) {
      .titre-plante {
        width: 700px;
      }

      #relative-div {
        width          : 375px;
        justify-content: center;
      }

      #relative-div #plante_search {
        margin: auto;
      }

      .achat-accueil>div>div>h2 {
        font-size : 26px;
        text-align: right;
      }

      .absolute-prix {
        justify-content: center;
      }

      .absolutePrix {
        left: 90%;
      }

      .produits:hover {
        transform : none;
        transition: none;
        z-index   : 0;
      }

      .produits {
        width : 300px;
        height: 300px;
      }


      /* Page Details */

      .absolutePrix {
        top      : 0;
        left     : 360px;
        font-size: 13px;
        padding  : 15px;
      }

      /* Panier plein */
      .delete_article img {
        width: 100px;
      }


    }

    @media (max-width: 576px) {
      .adresse_livraison {
        width: 100%;
      }

      #adresse_livraison>div {
        flex-direction: column;
        width         : 100%;
      }

      .details_mobile {
        width     : 100% !important;
        margin-top: 0 !important;
      }

      .detail-img {
        width: 100%;
      }

      .details_mobile img {
        width: 200px;
      }

      .details_mobile h5 {
        color     : #FFC107;
        text-align: center;
      }

      .absolutePrix {
        left     : 82%;
        top      : 5%;
        font-size: 13px;
      }

      .carousel-control-next {
        right: 0;
      }

      .carousel-control-prev {
        left: 0;
      }

      .table_historic,
      .table_historic tbody>tr,
      .table_historic thead,
      .table_historic tfoot {
        display       : flex;
        flex-direction: column;
        font-size     : 11px;
        width         : 100%;
      }

      .delete_article img {
        width : 50px;
        height: 50px;
      }

      .table_panier>tbody>tr>.quantite-input>input {
        width: 25px;
      }

    }