@charset "UTF-8";

  /* Style sombre pour le modal */
  .dark-modal {
    background-color: #1e1e1e; /* gris très foncé */
    color: #f0f0f0; /* texte clair */
    border-radius: 0.5rem;
  }

  /* Active dropdown au hover dans la navbar */
.navbar .dropdown-menu {

  border-radius: 0;
  background-color:#ffbb00 ;
}

.navbar {
  min-height: 50px; /* ou la hauteur souhaitée */
}

#panier-count {
    margin: 3px;
  background-color: orange !important;
  color: rgb(255, 0, 0) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(255, 255, 255); /* blanc semi-transparent */
}

.navbar-dark {
 
 
    background-repeat: repeat, no-repeat;

    padding: 5px 15px;
    width: 100%;
    border-radius: 8px;



        background: 
    url('/images/MuraleRhau10.png') !important; 
   /* background-blend-mode: overlay !important;  Mélange image + dégradé */
    background-size: 33% auto, cover !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre adoucie */
    border-bottom: 1px solid #777;
    padding: 5px 15px;
    width: 100%;
   background-color: #0029b1 !important;
}

.custom-close {
    filter: invert(26%) sepia(91%) saturate(7460%) hue-rotate(0deg) brightness(95%) contrast(104%);
}






.image-preview {
    width: 150px;   /* taille fixe carrée */
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.square-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* garde le ratio et croppe */
    object-position: center;
}


.card-body-blog .agrip {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 111px;
    height: 45px;
    background: url('/images/agrip-baseline.png') no-repeat center/contain;
    pointer-events: auto; /* le hover fonctionne sur le logo directement */
    z-index: 5;
    transition: transform 0.3s ease;
}

/* Effet au survol du logo */
.card-body-blog .agrip:hover {
    transform: translateY(-2px);
}





.article-id-badge {
    position: absolute;
    top: 22px;
    right: 20px;   /* <-- complètement à droite */
      background: rgb(255, 251, 0) !important;
   
   color: rgb(255, 0, 0) !important;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.70rem;
    z-index: 10; /* au-dessus du logo agrip */
}

/* Espacement horizontal entre tous les items du menu */
.navbar-nav > .nav-item {
    margin: 4px 6px !important;
}

.navbar-nav > .nav-item:last-child {
    margin-right: 0;
}



/* --- Style unifié pour tous les boutons nav sauf Panier/Connexion --- */
.nav-link.button-nav {
    display: inline-flex;           /* alignement texte + icône */
    align-items: center;            /* centrer verticalement */
    justify-content: center;        /* centrer horizontalement */
    gap: 0.3em;                     /* espace entre texte et icône ou emoji */
    padding: 0.4rem 0.8rem;         /* taille uniforme */
    font-size: 13px;
    font-weight: 600;
    background-color: #ffd900;
    color: #008cff !important;
    border-radius: 17px;
    border: 3.3px solid #ff9100;
    cursor: pointer;
    text-decoration: none;
    margin: 2px 1px !important;
    white-space: nowrap;            /* empêche le texte/emoji de passer à la ligne */
    transition: all 0.3s ease;
}

.nav-link.button-nav:hover,
.nav-link.button-nav:focus {
 
    background: url('/images/content-nav.png');
    background-color: #ff9900f3;
    border: 3.3px solid #ff5e00;
}

/* Maintenir la flèche du dropdown */
.nav-link.dropdown-toggle.button-nav::after {
    margin-left: 0.5em;
    vertical-align: middle;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

/* Mobile collapsé */
.navbar-collapse .button-nav {
    display: block;
    width: 100%;
    text-align: center;
    margin: 4px 0;
}

/* --- Boutons Panier et Connexion (bleu/blanc) --- */
.nav-link.button-nav.blue-btn,
.btn-panier,
.navbar-nav .nav-item a.btn-login {
    display: inline-flex;           /* alignement identique aux autres boutons */
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
    font-weight: 600;
    background-color: #007bff;      /* bleu */
    color: #fff !important;
    border: 3px solid #0056b3;
    border-radius: 17px;            /* même arrondi que dropdown */
    white-space: nowrap;             /* empêche retour à la ligne */
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.nav-link.button-nav.blue-btn:hover,
.btn-panier:hover,
.navbar-nav .nav-item a.btn-login:hover {
    background-color: #0056b3;
     color: #008cff !important;
     background: none;
      border: 3px solid #ffffff;
}


/* Boutons Panier et Se déconnecter (bleu/blanc) */
.btn-login,
.btn-panier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
    font-weight: 600;
    background-color: #007bff;
    color: #fff !important;
    border: 3px solid #0056b3;
    border-radius: 17px;
    white-space: nowrap; /* empêche retour à la ligne */
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-login:hover,
.btn-panier:hover {
    background-color: #0056b3;
    color: #ffd700 !important;
}


.copy-btn-futuristic.article-id-copy {
    position: absolute;
    top: 22px;       /* ajuste selon le badge */
    right: 60px;    /* ajuster selon la mise en page */
    width: 21px;
    height: 21px;
    z-index: 10;
    border-radius: 6.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
    line-height: 1;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(145deg, #00f0ff, #8a00ff);
    box-shadow: 0 0 6px rgba(0,240,255,0.5), 0 0 10px rgba(138,0,255,0.5);
    transition: transform 0.15s, box-shadow 0.2s;
}

.copy-btn-futuristic.article-id-copy:hover {
    transform: translateY(-1.2px);
    box-shadow: 0 0 8px rgba(0,240,255,0.8), 0 0 20px rgba(138,0,255,0.8);
}

.copy-btn-futuristic.article-id-copy:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(0,240,255,0.5), 0 0 12px rgba(138,0,255,0.5);
}

.copy-btn-futuristic.article-id-copy i {
    pointer-events: none;
    display: block;
    line-height: 1; /* assure le centrage vertical */
}



.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  background: url('/images/framedinv.png') 0 0/2px #ff75aa;
  background-size: 3px, cover;
  box-shadow: 0 0 16px rgb(255, 202, 255);
  padding: 20px;
  padding-top:0px;
}

.ownstyle-table {
    width: 100%;
    background-color: rgba(255, 0, 43, 0.404) !important;
    font-size: 13px;
    border: 0.75px solid green !important;
    border-collapse: collapse;
}

.ownstyle-table th,
.ownstyle-table td {
    background-size: 4px;
    background-repeat: repeat;
    text-align: center;
}

.ownstyle-table th {
    /*background-image: url('/images/framed.png');*/
}

.ownstyle-table td {
    /*background-image: url('/images/framedinv.png');*/
    max-width: 15%;
    border: 0.75px solid #0074d3 !important;
}

/* Effets alternés sur les lignes */
.ownstyle-table tbody tr:nth-child(2n) {
    background-color: #2500aca9;
}

.ownstyle-table tbody tr:nth-child(odd) {
    background-color: rgba(172, 255, 47, .382);
}

.main-content,
.top {
  border-radius: 0;
  color: #f1f1f1;
  padding: 20px;
  width: 100%;
  flex: 1;
}




.homevote,
.vote-action {
  display: flex;
  flex-direction: row;

}

 .vote-info {
    display: flex;
    flex-direction: row;
    gap: 15px;
}



.preserve-line-breaks {
  white-space: pre-wrap;
}


.preserve-line-breaks,.preserve-whitespace {
    white-space: pre-wrap;
     font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
}

.preserve-whitespace {
     font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
   white-space: pre-wrap;
   word-break: break-word;
   max-width: 100%;
   

}

.preserve-whitespace-chat {
    font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
    white-space: pre-wrap;       /* respecte les retours à la ligne */
    word-break: break-word;      /* coupe les mots trop longs */
    overflow-wrap: anywhere;     /* force la coupure même des URLs */
    max-width: 100%;             /* pas de débordement */
    line-height: 1.4;
    box-sizing: border-box;
}

  .dark-modal .modal-header,
  .dark-modal .modal-footer {
    background-color: #2a2a2a;
    border: none;
  }

  .dark-modal .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
  }



.colorblue,

.adresse p,p {
    font-size: 15px;
    line-height: 1.6;
}

body,body#calendar {
    margin-top: -40px;
}

.homevote {
    margin-top: -45px;
    align-items: center;
    gap: 20px;
}





#quantite::-webkit-inner-spin-button,#quantite::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#quantite::-moz-spin-button {
    -moz-appearance: textfield;
}

#quantite::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button!important;
    width: 25px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}




.table-responsive,.table.lignecmd,.table.lignecmd tbody tr:nth-child(2n) {
    background-color: transparent!important;
}


.table.lignecmd {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.table.lignecmd thead th {
    background-color: #2c3e50!important;
    color: #0202af;
    padding: 12px;
    text-align: left;
}

.table.lignecmd tbody tr {
    border-bottom: 1px solid #ddd;
}



.table.lignecmd td {
    padding: 10px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    font-size: 13px;
    border: 5px solid green!important;
}

.text-blog {
  font-size: medium;
   color: rgb(255, 248, 209) !important;
}
.info-item-vote {
    font-size: 12.3px;
     color: rgb(214, 175, 0) !important;
}

.info-item-datevote {
    font-size: 12.3px;
     color: rgb(214, 175, 0) !important;
}


.main-content,.top {
    border-radius: 0;
    color: #f1f1f1;
    padding: 20px;
}
.main-content {
    flex: 1;
    /*background: url('/images/framedinv.png') 0 0;*/
    background-size: 3.6px;
    background-color:  #221601;
    width: 100%;
    
      border-radius: 9px;
  
}

.card-body-blog {
    padding-top: 46px !important;
       margin: 2.6px 2.6px;
    border-top: solid rgba(255, 134, 235, 0.644) 2px;
       background-color: #695c44; /* ou n’importe quelle couleur opaque */
}

.top {
    flex: 1;

     background: url('/images/MuraleRhau10.png');
    background-repeat: repeat;
  background-color:  #ccc4b5;
    width: 100%;
     background-size: 10% auto,cover!important;
}

.main-content2 {
   
    color: #ffffff;
     
      
  background: url('/images/framedrenta.png') 0 0/2.2px #fae6bb;;
  background-size: 3px, cover;
  
   
    padding: 20px;
 
    margin: -20px;
    width: auto;
    height: auto;
    min-height: 100vh;
    
    
      border-radius: 9px;
}




.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1rem;
    padding: .5rem 0;
}

.validerbutton {
    padding-bottom: 85px;
    margin-bottom: 85px;
}

.fieldaddr

.adresse p {
    color: #fc0;
}

h1,h2,h3 {
    color: #fff;
    font-weight: 700;
}

.address-card {
    border: 1px solid #ccc;
    border-radius: 7px;
    padding: 10px;
    margin: 5px;
    transition: background-color .3s,border-color .3s;
    cursor: pointer;
    background-color: rgba(255,65,65,.5)!important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.address-card.activated {
    background-color: rgba(40,167,69,.5);
    border: 2px solid salmon;
}

.address-card.selected {
    background-color: #f0bcbc!important;
    border: 2px solid #eeb6ef!important;
    color: #130561!important;
}

.address-card:hover {
    background-color: #926262!important;
}

.address-card:hover span {
    color: #00ff84!important;
}

.address-card input[type=radio]:checked+label div strong {
    color: #ff3c00!important;
}

.address-card:hover strong {
    color: #ffacf7!important;
}

.address-card label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.popup-container, .popup-container2 {
    background-image: url('/images/water.jpg');
    background-repeat: repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 0; /* corrige les padding invalides */
}

.popup-container {
    width: 100%;
    min-height: 720px; /* remplace max-height par min-height */
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

.popup-container2 {
    width: 950px;
    height: 720px; /* fixe la hauteur */
}


.chat-messages {
    max-width: 100%;
    width: 100%;
    display: block !important;
    white-space: normal !important;     /* autorise le retour à la ligne */
    word-wrap: break-word !important;   /* casse les mots longs */
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.tablechat {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* important pour que max-width fonctionne */
     border-spacing: 0;
}
.chat-message-container {

    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
}


.chatcol {
    width: 140px;
    white-space: normal; /* autorise le retour à la ligne */
    padding: 5px 8px;
    vertical-align: top;
   
}

.color-gold {
   padding: 0px !important;
     color: rgb(214, 175, 0) !important;
}

.chatcolmsg {
    width: auto;               /* Laisse le contenu s’adapter */
    max-width: 100%;           /* Empêche le débordement */
    white-space: pre-wrap;     /* Respecte les retours à la ligne */
    word-wrap: break-word;     /* Casse les mots longs */
    overflow-wrap: break-word; /* Compatibilité navigateurs */
    padding: 5px;              /* Espacement interne */
    vertical-align: top;       /* Alignement avec la date/pseudo */
    color: white;              /* Texte blanc */
}


.text-zone {
padding-top: 5px;
}

.tablechat td, .tablechat th {
    white-space: normal;
    min-width: auto;
    padding: 5px 10px;
    vertical-align: top;
}




.tablechat {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.chatcolfull,.chatcolmsgfull,.tablechatfull {
    table-layout: auto;
    border-spacing: 0;
    border-collapse: collapse;
    text-decoration: none;
}

.tablechatfull {
    width: 900px;
  
    color: #5b005b;
    overflow-y: scroll;
}

.chatcolfull {
    font-weight: 900;
    border-bottom: 0.5px solid;
    width: 180px; /* plus large pour contenir date + pseudo */
    white-space: nowrap; /* pour garder tout sur une seule ligne */
    padding: 5px 8px;
    vertical-align: top;
}

.chatcolmsgfull {
    font-weight: 900;
    border-bottom: 0.5px solid;
    width: calc(100% - 190px); /* prend le reste de la largeur */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 5px 8px;
    vertical-align: top;
}

.chatcolfulldelform {
    width: 15px;
}

.chatcol small.text-muted {
   color: rgb(214, 175, 0) !important;
}

p small.text-muted {
  color: rgb(214, 175, 0) !important;
      white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.fa.fa-trash.text-danger {
    margin: 0 !important;
    padding: 0 !important;
    margin-right: -100px;
    padding-right: -100px;
}

.btn2,.btn2:hover {
  transition: .2s ease-in-out;
    
    
}

.input-group .btn {
    width: 20%;
    height: 35px;
    padding: .5rem 1rem;
    font-size: .875rem;
}

.btn-blue,.btn-large {
background: linear-gradient(135deg, 
    rgba(233, 228, 228, 0.9),   /* blanc lumineux */
    rgba(255, 200, 220, 0.7),   /* rose doux */
    rgba(200, 255, 200, 0.6)    /* vert pastel */
) !important;


   
   color:  rgb(255, 230, 0) !important;
       text-shadow: 1px 1px 2px #000,0 0 6px rgba(155,153,153,.5);
}

.btn-panier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;                  /* texte blanc initial */
  background-color: #0d6efd;       /* bleu primary */
  border: 1px solid #0d6efd;       /* bordure bleue initiale */
  cursor: pointer;
  text-decoration: none;

  /* transitions pour fond, texte et bordure */
  transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover : inversion couleurs */
.btn-panier:hover {
  background-color: #ffffff;       /* fond blanc */
  color: #0d6efd;                  /* texte bleu */
  border-color: #0d6efd; 
  border: solid 1px;      /* bordure blanche */
}



/* Selected / actif */
.btn-panier.selected {
  background-color: #0a58ca;       /* bleu encore plus foncé */
  color: #ffffff;
  transform: scale(1.05);
}




/* Boutons bootstrap harmonisés */
.btn.btn-primary {
  border-radius: 17px !important;
  transition: 0.2s ease-in-out !important;
  margin: 2px 6px !important;
  
}

.btn:hover, 
.btn-primary:hover {
  color: #05f !important;
  background-color: #fff !important;
}

.btn-large {
    font-weight:626;
    width: 100%!important;
}

button.voter.btn {
    padding: 4.7px;
    font-size: 9px;
    border-radius: 11px;
}

.btn-delete {
    padding: 0;
    margin: 0;
    font-size: 0.8em; /* Réduit la taille du contenu */
}
.btn-delete i {
    font-size: 0.8em; /* Réduit l’icône */
    color: red !important;
}

.btn.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
}

.form-vote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 1rem;
}

.vote-action {
    display: flex;
    align-items: center;
    gap: .5rem;
}



.reservation-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.area {
    width: 100%;
    height: 120px;
    margin: 0 auto;
   
    background-color: #00ffea91 !important;
}

.red {
    background-color: red;
}

.highlighted-date {
    background-color: #ff0;
    color: #000;
}

.highlighted-date2 {
    background-color: green;
    color: #fff;
}

.highlighted-date3 {
    background-color: red;
    color: #fff;
}

.info-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-item {
    margin-right: 15px;
    margin-top: -18px;
}

.form-group-custom:last-child,.info-item:last-child {
    margin-right: 0;
}

.btn-container {
    margin-top: 10px;
}

.link-article-contenu {
    color:#00ffea;
    padding: 0;
    margin: 0;
}
.link-article-contenu-fullchat {
    color:#006eff;
    padding: 0;
    margin: 0;
}




body#blankmsg {
    width: 950px;
     height:720px;
    margin: 0 auto;

padding: 0 auto;
padding-top: 20px;
}

 .bottomspaceblog {
margin-bottom: 250px;
 }


.bottomspace {
    margin-bottom: 100px;
}

.bottomspaceform {
    margin-bottom: 30px;
}

.transparent-card a,.transparent-card a span,.transparent-card a:hover {
    color: #ffb14b!important;
    text-shadow: 1px 1px 2px #000,0 0 6px rgba(155,153,153,.5);
}

.transparent-card {
    background-color: rgba(1, 86, 155, 0.418)!important;
    border: 1px solid #ccc;
}

.text-yellow {
    color: #ff0!important;
}


.text-blue {
    color: rgb(0, 162, 255)!important;
}
.text-darkgrey {
    color: rgb(236, 236, 236)!important;
    text-shadow: 1px 1px 0 #505050, -1px -1px 0 #1d1d1d;
    position: relative;
}

.text-darkgrey::after {
    content: '';
    display: block;
    height: 2px; /* épaisseur du soulignement */
    background-color: #1e90ff; /* bleu */
    width: 100%;
    margin-top: 2px; /* petit espace sous le texte */
}



.text-yellowarticle {
    color: rgb(255, 251, 0) !important;
    font-weight: 550; /* gras léger */
  
}



.text-special {
    color: rgb(255, 102, 0)!important;
     text-shadow: 0.2px 0.2px 2px #000,0 0 6px rgba(155,153,153,.5);
}

.text-specialarticle {
    color: rgb(255, 251, 0)!important;
    text-shadow: 0.2px 0.2px 2px #000,0 0 6px rgba(155,153,153,.5);
    font-weight:555;
}

.img-thumbnail {
    color: #0084ff!important;
}

i:hover {
    background-color: #b8faf7;
}

.reservation-section .btn-container {
    margin-bottom: .5rem;
}

.colorblue,.text-muted {
    color: #00f!important;
}

.colorbluewhite {
    color: rgb(255, 255, 255)!important;
}
.colorgreenlink {
    color: rgb(255, 255, 255)!important;
}
.colorbluesky {
     color: rgb(0, 162, 255)!important;
    font-weight: normal;
   font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
    font-size: 0.9rem; /* texte plus grand */
    line-height: 1.2; /* compact */
  
}

.colortitlearticle {
    color: #ff958b !important; /* couleur bonbon */
    font-weight: bold;
    font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
    font-size: 1rem; /* texte plus grand */
    line-height: 1.2; /* compact */
    text-shadow: 1px 1px 0 #e6e4e4, -1px -1px 0 #dfdfdf; /* petit contour blanc simple */
}




.colororange {
    color: rgb(255, 102, 0) !important;
    text-decoration-color: #ff4d00;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Ombre légère autour du texte */
}


.coloryellow {
     color: #ffd000;
     text-decoration-color: none; /* Couleur du soulignement */
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Ombre légère autour du texte */
}

.not-editable {
    background-color: #fff;
    color: initial;
    cursor: default;
}

.padding-custom {
  padding: 20px;
}



.form-row-custom {
    display: flex;
    flex-wrap: wrap;
}

.form-group-custom {
    flex: 1 0 20%;
    margin-right: 15px;
}

.input-sm {
    width: 200px;
}



.textsend {
    margin-top: 25px;
    margin-bottom: 25px;
   background: 
    url('/images/framedgray.png'),
    linear-gradient(135deg, #7e96da, #036b55, #ff69b4) !important;
   background-size: 5px, cover !important;
    background-repeat: repeat, no-repeat;
    border: 1px solid rgb(223, 230, 255) !important;
    
}

#quantite {
    height: 36px;
}

.number-wrapper {
    position: relative;
}

.number-wrapper:after,.number-wrapper:before {
    position: absolute;
    right: 5px;
    width: 1.6em;
    height: .9em;
    font-size: 10px;
    pointer-events: none;
    background: #fff;
}

.number-wrapper:after {
    color: #00f;
    content: "\25B2";
    margin-top: 4px;
}

.number-wrapper:before {
    color: red;
    content: "\25BC";
    margin-bottom: 5px;
    bottom: -.5em;
}

.number-wrapper3 {
    position: relative;
    width: 100%;
    display: inline-block;
}

/* Input raffiné */
.number-wrapper3 input {
    width: 100%;
    padding: 0.45rem 2.2rem 0.45rem 0.5rem; /* espace pour flèches */
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #2e2e2e; /* bg sombre */
    color: #fff;
    box-sizing: border-box;
    height: 28px;
}

/* Focus dynamique */
.number-wrapper3 input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 8px rgba(74,144,226,0.3);
    outline: none;
    color: yellow;
}

/* Masque spin buttons natifs tout en gardant clic fonctionnel */
.number-wrapper3 input::-webkit-inner-spin-button,
.number-wrapper3 input::-webkit-outer-spin-button {
    opacity: 0; /* invisible mais cliquable */
    width: 1.8em; 
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.number-wrapper3 input[type=number] {
    -moz-appearance: textfield; /* Firefox, visible mais minimal */
}

/* Flèches décoratives */
.number-wrapper3::after,
.number-wrapper3::before {
    position: absolute;
    right: 8px;
    width: 1em;
    font-size: 10px;
    pointer-events: none; /* décoratif uniquement */
    text-align: center;
}

/* Flèche haut */
.number-wrapper3::after {
    content: "\25B2";
    color: #00f;
    top: 28%;
    transform: translateY(-50%);
}

/* Flèche bas */
.number-wrapper3::before {
    content: "\25BC";
    color: red;
    top: 70%;
    transform: translateY(-50%);
}


/* Formulaire avec bouton sur ligne séparée */
form.form-add-article {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Bouton ajouter */
.btn-custom-add {
    width: 130px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    border-radius: 0.25rem;
    background: linear-gradient(135deg,#4a90e2,#357ABD);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-custom-add:hover {
    background: linear-gradient(135deg,#357ABD,#4a90e2);
    box-shadow: 0 4px 12px rgba(53,122,189,0.3);
    cursor: pointer;
}



.fieldaddr {
    background-color: rgba(0,180,246,.69);
    border: 1px solid #ced4da;
    padding: 10px;
}

.fieldaddr:focus {
    color: #fff;
    background-color: #0066ff5a;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 5px rgba(0,123,255,.5);
}

.input-group.small-field {
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
}

.smallsearch {
    width: 75%;
}



.small-select {
    max-width: 60%!important;
    font-size: .6rem;
    padding: .5rem;
    height: 30px;
    margin-top: 1rem;
}

.input-group.small-field .form-control {
    height: 35px;
    font-size: .875rem;
    padding: .5rem;
}

p {
    color: #05f;
}


.card-text br {

    display: block; /* Make it behave like a block-level element */
    margin-bottom: 1em; /* Example: Pull the next line up */
    /* Or a small positive margin for a tiny space */
    /* height: 0.5em; */ /* You could try setting a height directly */
}

.card-text {
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.4;
}
.card-title-blog {
    font-weight: 700;

    /* Couleur flashy sur fond brun/kaki clair */
     color: #fff459 !important; /* crème / jaune très clair */
    
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* contraste et lisibilité */
}






.chatcol-title {
    padding: 0px !important;
     color: rgb(214, 175, 0) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* même style d'ombre */
       width: 140px;
    white-space: normal; /* autorise le retour à la ligne */
    padding: 5px 8px;
    vertical-align: top;
}





    

h5 {
  font-size: 17.5px !important; /* ou toute taille souhaitée */
}

/* This sets up your always-square 80x80px container */
.catalogue-image-wrapper {
  width: 80px;
  height: 80px;
  /* background-color: #f0f0f0; /* You can remove this if you don't want visible bands behind the image */
  overflow: hidden; /* Crucial: crops anything that spills outside the 80x80px */
  display: inline-block;
  flex-shrink: 0;
  border: 0.5px solid #008cff; 
}

/* This styles the image *inside* the wrapper */
.catalogue-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the change! It fills the 80x80px area and crops as needed. */
  display: block;
  cursor: pointer;
}







body,html {
    padding: 0;
    width: 100%;
    background: linear-gradient(135deg,#555,#555);
    font-family: Arial,sans-serif;
    color: #f1f1f1;
    height: 100%;
    margin-top: -20px;
   
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.banner {
    width: 100%;
    height: 285px;
    background-image: url('/images/banniere.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    border-radius: 9px;
    /*z-index: 1000*/
}









.bg-bordeaux {
    background-color: maroon;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28.5px;
    z-index: 999999 !important;
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */

    background:
        url('/images/content.png');
    background-size: 4px, cover;
    background-repeat: repeat, no-repeat;

    border-top: 0.4px solid #0e3392;
   
    color: #fff;
}



.text-left {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;

    /* Gradient multicolor vif pour fond clair */
    background: linear-gradient(
        90deg,
        #FF0055,  /* rose vif */
        #ff9900,  /* orange */
        #00d9ff,  /* cyan vif */
        #00FF00,  /* vert fluo */
        #ff00dd   /* magenta */
    );
    background-size: 1000% 1000%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Ombre très légère pour fond clair */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);

    /* Animation gradient */
    animation: rainbowShift 7s linear infinite;

}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


footer p {
    margin: 0;
}

/* 🧩 Force le panneau d'emojis à toujours être au-dessus */
.emoji-picker, .emoji-picker__wrapper, .EmojiPickerReact {
  z-index: 999998 !important;
  position: absolute !important;
}

/* ✅ Annule tout masquage Bootstrap */
.input-group,
.text-zone,
form,
.container,
.pagination,
.page-item,
.page-link {
  overflow: visible !important;
  z-index: auto !important;
  position: static !important;
}

/* 💡 Ajoute un peu de marge si le picker s’ouvre juste au-dessus de la pagination */
.emoji-btn {
  position: relative;
  z-index: 100;
}


@media screen and (orientation: portrait) {

.ownstyle-table {
    width: 100%;
 
    font-size: 13px;
    border: 0.75px solid green !important;
    border-collapse: collapse;
}

.ownstyle-table th,
.ownstyle-table td {
    background-size: 3px;
    background-repeat: repeat;
    text-align: center;
}

.ownstyle-table th {
    background-image: none;
}

.ownstyle-table td {
    background-image: none;
    max-width: 15%;
    border: 0.75px solid #0074d3 !important;
}

/* Effets alternés sur les lignes */
.ownstyle-table tbody tr:nth-child(2n) {
    background-color: #2500aca9;
}

.ownstyle-table tbody tr:nth-child(odd) {
    background-color: rgba(172, 255, 47, .382);
}


  #header-nav {
    display: flex !important;
    flex-direction: row;        
    justify-content: center;    
    align-items: center;
    width: 100%;
    overflow: visible;  /* possibilité de scroller si trop serré */
    flex-wrap: wrap;    /* permet le retour à la ligne */
    padding: 10px 0;
  }

  #header-nav .navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;    /* retour à la ligne quand nécessaire */
    gap: 10px;          /* espace régulier entre les boutons */
    width: 100%;
  }

  .navbar {
    background: 
    url('/images/MuraleRhau10.png') !important; 
   /* background-blend-mode: overlay !important;  Mélange image + dégradé */
    background-size: 33% auto, cover !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre adoucie */
    border-bottom: 1px solid #777;
    padding: 5px 15px;
    width: 100%;
   background-color: #0029b1 !important;
}

  #header-nav .nav-item {
    text-align: center;
    padding: 5px 10px;
    flex: 0 1 auto;     /* taille auto, ne déborde pas */
  }

  #header-nav .nav-link {
    display: inline-block;
    white-space: nowrap; /* empêche le texte de couper au milieu */
    
  }

  .banner {
    width: 100%;
    height: 205px;
    background-image: url('/images/banniere.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
  }

  .main-content2 {
   
    color: #ffffff;
     
       background: #E6CFA3;

    background-image: url('/images/framedgray.png');
    padding: 20px;
    /*background-blend-mode: overlay!important;*/
    background-size: 3px;
    margin: -20px;
    width: auto;
    height: auto;
    min-height: 100vh;
    
    
      border-radius: 9px;
}
}


@media only screen and (max-width: 799px) {

    .ownstyle-table {
    width: 100%;
    background-color: rgba(0, 38, 255, 0.404) !important;
    font-size: 13px;
    border: 0.75px solid green !important;
    border-collapse: collapse;
}

.article-id-badge {
    position: absolute;
    top: 16px;
    right: 9px;   /* <-- complètement à droite */

    padding: 2px 6px;
    border-radius: 3.84px;
    font-size: 0.48rem;
    
}

.card-body-blog {
    padding-top: 36px !important;
}



    .copy-btn-futuristic.article-id-copy i {
        width: 10px;     
        height: 10px;
        line-height: 1;
    }

.copy-btn-futuristic.article-id-copy {
    top: 16px;
    right: 49px;
    width: 16px;
    height: 16px;
    font-size: 0.60rem;
    background: linear-gradient(145deg, #00d0ff, #8000ff); /* moins vif */
    box-shadow: 0 0 3px rgba(0,208,255,0.3), 0 0 4px rgba(128,0,255,0.3); /* effet néon léger */
}

.copy-btn-futuristic.article-id-copy:hover {
    box-shadow: 0 0 5px rgba(0,208,255,0.5), 0 0 7px rgba(128,0,255,0.5); /* léger au hover */
}

.copy-btn-futuristic.article-id-copy:active {
    transform: translateY(0); 
    box-shadow: 0 0 2px rgba(0,208,255,0.2), 0 0 3px rgba(128,0,255,0.2); /* très discret au clic */
}



    .banner {
        
        margin-top: -12.5px;
        width: 100%;
        height: 111px;
        background-image: url('/images/banniere_mob.png') no-repeat center/contain; 
        background-size: 100% 98px;
        background-position: bottom;
        background-color: #fff;
    }

/* Navbar styles */
.navbar {
    background: 
    url('/images/MuraleRhau10.png') !important; 
    background-blend-mode: overlay !important; /* Mélange image + dégradé */
    background-size: 33% auto, cover !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre adoucie */
    border-bottom: 1px solid #777;
    padding: 5px 15px;
    width: 100%;
   
}
.menu{
    background-color: #2c2c2c !important;
}

}

@media only screen and (max-width: 767px) {
  /* Rendre tout 100% de largeur */
  .main-wrapper, .main-content, .article.card.bottomspace,
  .flex-container, .form-row-custom, .form-group-custom,
  .btn-large, .btn-blue, .table, .tablechat, .chat-messages, 
  .tablechatfull, .banner, .area, .card-deck {
    width: 100% !important;
  }

.text-left {
  font-size: 9.2px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:#0029b1;
    font-weight: bold;
}
.card-body-blog .agrip {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 55.5px;
    height: 22.25px;
    background: url('/images/agrip-baseline.png') no-repeat center/contain;
    pointer-events: auto; /* le hover fonctionne sur le logo directement */
    z-index: 5;
    transition: transform 0.3s ease;
}

/* Effet au survol du logo */
.card-body-blog .agrip:hover {
    transform: translateY(-2px);
}

  .preserve-whitespace {
     font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
   white-space: pre-wrap;
   word-break: break-word;
   max-width: 100%;
  }


  
  .input-group.small-field {
    flex-direction: row; /* Les éléments seront côte à côte sur les grands écrans */
  }

  .input-group.small-field .form-control,
  .input-group.small-field .btn {
    width: auto; /* Laissez la taille par défaut sur les grands écrans */
  }

  .small-select {
    max-width: 30%;  /* Pour que le select ne prenne pas trop de place */
  }

  .main-content2 {
   
    color: #f1f1f1;
    z-index: 600;
    padding: 20px;

    /*background-blend-mode: overlay !important; 
    
     background-size: 34% auto, cover !important;
    
    
        background: 
    url('/images/MuraleRhau10.png'); /* Mélange image + dégradé */
   
 background-size: 3x;
  
    margin-top: -20px;
    margin-bottom: -20px;
    margin-left: -20px;
    margin-right: -20px;
    width: auto; /* Ou une largeur définie */
    
  }










/* Conteneur principal du chat */
.chat-messages {
width: 100%;
max-width: 100%; /* Assure que le conteneur est bien à 100% */
overflow-y: auto; /* Permet de défiler si nécessaire */
}






.popup-container2 {
  min-height: 100vh; /* s'étend au moins jusqu’à la taille de l’écran */
  width: 550px;
    margin: 0 auto;
       background-size: cover;
    background-image: url('/images/water.jpg');
    background-repeat: repeat;
padding: 0 auto;
 overflow-y: auto;
}


.popup-container {
  min-height: 100vh; /* s'étend au moins jusqu’à la taille de l’écran */
  width: 550px;
    margin: 0 auto;
    padding: 0 auto;
    background-size: cover;
    background-image: url('/images/water.jpg');
    background-repeat: repeat;
    overflow-y: auto;
}

  .chat-message-container {
    display: block; /* passe les tr en block */
    margin-bottom: 20px; /* espace entre les messages */
  }
  .chatcol, .chatcolmsg {
    display: block;  /* empile les td */
    width: 100% !important;
    box-sizing: border-box;
  }
  .chatcol {
    margin-bottom: 8px; /* espace entre date+pseudo et message */
  }
  
    /* Assurer une bonne responsivité des cartes */
    .card {
      width: 100%;
    }
  



  
    /* Contenu principal */
    .top {
      padding: 0px;
      color: #f1f1f1;
      border-radius: 0;
      width: 100%;
      
    }
  
    /* Boutons de pagination */
    .pagination {
      display: flex;
      justify-content: center;
      width: 100%;
      flex-wrap: wrap;
    }
  
  
  
  

  /* Centrage et mise en forme du conteneur principal */
  .main-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    background-image: url('/images/framedinv.png');
    background-repeat: repeat;
    background-size: 4px;
    box-shadow: 0px 5px 15px rgb(52, 52, 52);
    padding: 20px;
  }

  /* Boutons de pagination */
  .page-item {
    width: 100% !important;
    max-width: 88px;
    padding: 6px;
  }

  .page-link {
    background-color: #ff5100;
    color: white;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
  }

  .page-link[aria-disabled="true"] {
    background-color: #cccccc;
    color: #666666;
    pointer-events: none;
  }

  /* Navbar */
  .navbar-nav {
    display: flex !important;
    flex-direction: column;
    
  }

  .navbar.active .navbar-nav {
    display: flex;
  }

  .nav-item {
    text-align: center;
    padding: 10px;
  }

  .burger-menu {
    display: block;
    cursor: pointer;
    font-size: 24px;
    color: white;
  }

  /* Pagination */
  .pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
  }

  .pagination .page-item {
    flex: 1 0 auto;
    margin: 2px;
  }

  .pagination .page-link {
    font-size: 12px !important;
    padding: 5px 8px !important;
    text-align: center;
    border-radius: 4px;
  }






  /* Images */
  .card-img-top {
    width: 100%;
    height: auto;
  }

  /* Texte non éditable bien formaté */
  .not-editable {
    background-color: white;
    color: initial;
    cursor: default;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
     font-family: "Poppins", "Nunito", "Raleway", "Roboto", sans-serif;
  }
}

@media only screen and (max-width: 767px) {
  body#blankmsg {
    overflow-x: hidden; /* pas de scroll horizontal */
    width: 100%;        /* remplit tout l’écran */
    margin: 0;          /* plus besoin de centrer */
  }

  /* Conteneur du chat full-width */
  .popup-container,
  .popup-container2,
  .chat-messages {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box;
    min-height: 0px !important;
    overflow-x: hidden !important;
  }

  /* Tableau chat responsive */
  .tablechatfull {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
  }

  /* Empilement des colonnes */
  .chatcolfull,
  .chatcolmsgfull {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 8px; /* espace entre pseudo/date et message */
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .chatcolfull {
    font-size: 2.65em;
    font-weight: bold;
    white-space: normal;
  }

  .chatcolmsgfull {
    font-size: 1.6em;
  }


}