:root {
    /*Transition*/
    --time:0.4s;

    /*Color*/
    --black:#000000;
    --white:#ffffff;
    --blue:var(--secondary);
    --grey:#636363;
    --orange : #FD8934;

    /*Font*/
    --font:SegoeUi;

    --font-xs:12px;
    --font-s:14px;
    --font-m:16px;
    --font-l:24px;
    --font-xl:50px;

    /*Border*/
    --border-s:1px;
    --border-m:4px;
    --border-raduis:4px;
    --border-raduis-cx:12px;


    /*padding*/
        /*btn*/
            --padding-top:10px;
            --padding-bottom:10px;
            --padding-left:25px;
            --padding-right:25px;
        /**/
    /*Ombre portée*/
    --sw:var(--sw1) var(--sw2) var(--sw3) var(--sw4) var(--swcolor);
    --sw1:0px;
    --sw2:0px;
    --sw3:6px;
    --sw4:3px;
    --swcolor:rgb(0 0 0 / 15%);
  }

  body
  {
    margin: 0;
  }

  a, a:hover
  {
    color: var(--secondary);
  }

  h1
  {
    font-size: 2rem;
  }

  .bi-arrow-left
  {
    position: relative !important;
    top: -1px !important;
  }

  .price-ht
  {
    color: white;
    border-radius: 4px;
    padding: var(--elem-padding);
    background-color: var(--secondary);
  }

  .catalogue-back {
    border: 1px solid var(--secondary);
    color: var(--secondary);
    border-radius: 4px;
    display: inline-block;
    padding: 3px 25px 3px 10px;
    font-size: 14px;
}

.ol-page-connexion{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-image: url(../../img/chemise.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ol--glass{
    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-raduis-cx);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.7px);
    -webkit-backdrop-filter: blur(7.7px);
    border: 1px solid rgba(255, 255, 255, 0.5);

}
.ol-connexion {
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;

    text-align: center;

    /*Forme*/
    width:577px;
    height:577px;
}

.ol-connexion-inner {
    width: 327px; /* même width que le logo */
}

.ol-connexion img{
    margin-bottom: 150px;
}
.ol-btn-connexion{
    display: inline-block;
    width: 170px;
    margin: 0 auto;
    font-size: var(--font-m);
    color: var(--white);
    background-color: var(--secondary);
    border-radius: var(--border-raduis-cx);
    padding-top:var(--padding-top);
    padding-bottom:var(--padding-bottom);
    padding-left:var(--padding-left);
    padding-right:var(--padding-right);
    text-decoration:none;
    padding: 15px;
}

.ol-btn-connexion:hover
{
    color: var(--white);
}

.ol-btn-connexion_2
{
    width: 220px;
    border: none;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
}

.ol-mg20{
    margin-top: 7px;
}
.ol-visitesite{
    color: var(--secondary);
    text-decoration:underline;
    text-decoration-color: var(--secondary);
}

.ol-label
{
    color: var(--secondary);
    float: left;
    margin-bottom: 5px;
}

.ol-form
{
    margin-bottom: 0.75rem;
}

/* Panier */
#little_basket_numeroOrdre::placeholder, #little_basket_dateLivraisonSouhaitee:not(:focus)
{
    color : #C8C8C8;
}

.basket-icon
{
    top: -2px;
    position: relative;
}

.date-livraison
{
    color : #C8C8C8;
    font-size: 14px;
    margin-bottom: 0;
}

.btn-stature, .btn-stature:hover
{
    background-color: var(--secondary);
    color: white;
}

/* Panier latéral */

#little-basket
{
    position: relative;
    top: -40px;
}

.little-basket-img
{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.little-basket-titre
{
    border-bottom: var(--secondary) 1px solid;
    display: inline;
    color: var(--secondary);
    font-size: 18px;
    word-break: break-all;
}

.little-basket-ref
{
    font-size: 20px;
    color:var(--secondary);
}

.little-basket-trash svg
{
    width: 12px !important;
    height: 12px !important;
    margin-right: 0px;
    cursor: pointer;
}

.litte-basket-desc
{
    font-size: 14px;
}

.little-basket-montant
{
    color: white;
    border-radius: 4px;
    padding: var(--elem-padding);
    background-color: var(--secondary);
}

.little-basket-article-price
{
    font-size: 14px;
}


.container-if-basket
{
    max-width: 94%;
    margin: 0 0 0 5%;
    font-size: 18px;
}

.container-little-basket
{
    box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.1);
    margin-right: 1rem;
    font-size: 18px;
    padding: 1rem;
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    min-height: 95vh;
}

.container-little-basket .row
{
    flex-grow: 1;
}

.container-little-basket .total-ht-block
{
    margin-top: auto;
}

.container-little-basket hr
{
    margin: 0.55rem 0;
}

.container-little-basket input
{
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--secondary);
    padding: 5px;
    /* margin: 0.5rem 0 0 0; */
}

.pl-0
{
    padding-left: 0;
}

.retour
{
    color: #636363;
}

/* .container-little-basket .bouton */
.bouton
{
    border: 1px solid var(--secondary);
    color: var(--secondary);
    background-color: white;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
}

.bouton:hover
{
    border: 1px solid var(--secondary);
    background-color: var(--secondary);
    color: white;
}

@media (max-width: 1440px)
{
    .little-basket-titre
    {
        font-size: 14px;
    }
}

@media (max-width: 1023px)
{
    .col-little-basket
    {
        display: none;
    }
    .catalogue-show > .row
    {
        margin-right: 1rem;
    }

}

.filtre, .search {
    background-color: white;
    border: 1px solid #444;
    color: #444;
    border-radius: 5px;
    cursor: pointer;
    text-align-last: center;
    display: inline-block;
    margin-right: 1rem;
    font-size: 14px;
}

.filtre {
    width: 80px;
}

.search {
    width: 200px;
    text-align-last: end;
    padding-right: 2rem;
}

.search-parent {
    position: relative; /* Add this to ensure the pseudo-element is positioned relative to this container */
}

.search-parent::after {
    content: "\F52A"; /* Correct the content value */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 500px) {
    .search-parent::after {
        content:"";
    }

    .search
    {
        width: 182px;
        margin-top: 0.5rem;
    }
}

/* TABLEAU "varia" */
/* Structure de la grille */
.varia-grid {
    display: grid;
    width: 100%;
    gap: 5px; /* Espace entre les éléments de la grille */
}

/* Définition des colonnes pour l'en-tête */
.grid-header {
    display: flex;
    justify-content: space-between;
}

/* Définition des colonnes pour chaque ligne */
.grid-row {
    display: flex;
    justify-content: space-between;
}

/* Styles pour les éléments de la taille */
.taille span {
    border: 1px solid var(--secondary);
    color: black;
    border-radius: 4px;
    padding: 3px;
    font-size: 14px;
    text-align: center;
    width: 82px;
    display: block;
}

/* Styles pour les éléments de quantité */
.qte input {
    width: 50px;
    font-size: 14px;
    padding: 3px;
    text-align: center;
}

.form-control {
    padding: 0;
}


#basket-clear-btn > svg {
    transform: translateY(-2px);
}

.form-check-input:not(.not-specific):checked[type="checkbox"] {
    background-color: #fff;
    background-image: url('../../img/cochebstrt.svg');
    border-color: #009EE0;
}

summary {
    cursor: pointer;
}

summary:has(h1:first-child)::marker {
    font-size: 2rem;
}

summary > h1 {
    display: inline-block;
}

.big-margin-bottom {
    margin-bottom: 50vh;
}