/* ===========
   DARK MODE
   =========== */

:root {
    --couleur-bordure-carte: #c6893f;   
    --couleur-citation: #222222;   
    --couleur-fond-body: #222222;    
    --couleur-fond-carte: #e2e8f0;   
    --couleur-texte-carte: #222222;
    --couleur-texte-titre: #222222;     
         
}

/* ===========
   DÉTECTION DARK MODE
   =========== */

@media (prefers-color-scheme: dark) {

    :root {
        --couleur-citation: #cbd5e1;  
        --couleur-fond-body: #121212; 
        --couleur-fond-carte: #1e293b;
        --couleur-texte-carte: #cbd5e1;
        --couleur-texte-titre: #e2e8f0;
}
}




/* ===========
   BASE
   =========== */
body {
    background-color: var(--couleur-fond-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    margin:0; 
}



/* ===========
   MENUS
   =========== */


/* --- MENU 1 --- */

.btn-langue {
    background-color: #444444; 
    border: 1px solid #555555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: bold;
    margin-left: auto;
    padding: 7px 13px;
    text-decoration: none;
    text-shadow: none;
    transition: all 0.2s ease;
    
}

 .btn-langue:hover {
    background-color: #c6893f; 
    color: #333333;
    text-decoration: none;
}

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

 .logo img.bbmew-logo {
    height: 95px;
    position: relative;
    top: 15px;    
    transition: height 0.3s ease;  
    width: auto;
    z-index: 10;
}

.logo img.texte-logo {
    height: 45px; 
    margin-left: 10px;
    transition: height 0.3s ease;
    width: auto;   
}

  .menu1 {
    align-items: center;
    background-color: #222222;
    border-bottom: 3px solid #c6893f;
    display: flex;
    height: 45px;
    padding: 10px 20px;
}




/* --- MENU 2 --- */

  .liens {
     display: flex;
     justify-content: center;
     list-style: none;
     margin: 0;
     padding: 0;
}
  .liens a {
     color: #ffffff;
     font-size: 0.95rem;
     font-weight: bold;
     text-decoration: none;
     transition: color 0.2s ease;
}

  .liens a:hover {
     color: #c6893f; 
}

  .liens li {
     margin-left: 20px; 
}

  .liens li:not(:last-child) {
     border-right: 1px solid #888888;
     padding-right: 20px; 
}

  .menu2 {
     background-color: #283c50;
     border-bottom: 1px solid #c6893f;
     padding: 12px 20px;
}





/* --- MENU 3 --- */
.menu3 {
    background-color: #333333;
    border-bottom: 1px solid #ffffff;
    box-shadow: 0 1px 0 0 #283c50;
    padding: 7px 20px;
}

.slogan {
    color: #ffffff;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;
    margin: 0;
    padding: 0; 
    text-align: center;
    width: 100%;
}

.sous-liens {
    color: #ffffff;
    display: flex;
    gap: 20px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sous-liens a {
    color: #666666;
    text-decoration: none;
}


/* ======================================
   CONTENU PRINCIPAL
 ======================================== */

  .articles {
     background-color: var(--couleur-fond-carte);
     border: 1px solid var(--couleur-bordure-carte); 
     border-radius: 8px;       
     margin: 0 auto 10px;         
     max-width: 900px;          
     padding: 40px; 
     width: 90%;            
}

  .articles p {
     color: var(--couleur-texte-carte); 
     font-size: 1.05rem;
     line-height: 1.6;
     margin-bottom: 30px;
     margin-top: 0;
}

  .badge-a-venir {
    display: inline-block;
    background-color: #718096;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 2px;
}

   blockquote {
     border-left: 4px solid #c6893f;
     color: #e2e8f0;
     font-size: 1.05rem;
     line-height: 1.6;
     margin: 30px 0 0 0;
     padding-left: 20px;
}

  .card-tag {
     background-color: #283c50;
     border-radius: 4px;
     color: #ffffff;
     display: inline-block;
     font-size: 0.8rem;
     font-weight: bold;
     padding: 5px 10px;
     text-transform: uppercase;
}

  .citation {
     border-left: 4px solid #c6893f;
     color: var(--couleur-citation);
     font-size: 1.05rem;
     line-height: 1.6;
     margin: 30px 0 0 0;
     padding-left: 20px;
}

  .contenant-principal {
     background-color: #283c50; 
     border: 1px solid #444444;
     border-radius: 8px;       
     margin: 30px auto 40px;         
     max-width: 900px;          
     padding: 25px;
     padding-bottom: 35px;
     width: 90%;             
}

  .contenant-principal p {
     color: var(--couleur-texte-carte); 
     font-size: 1.05rem;
     line-height: 1.6;
     margin-bottom: 30px;
     margin-top: 0;
}

  .footer-contenu {
     align-items: center;
     display: flex;
     font-size: 0.8rem;
     justify-content: center;
     gap: 15px;
} 

  .footer-contenu a {
     color: #c6893f; 
     text-decoration: none;
}

  .footer-contenu a:hover {
     text-decoration: underline;
}

  .footer-disclaimer {
     color: #aaaaaa; 
}

  .footer-fixe {
     background-color: #222222; 
     border-top: 1px solid #222222; 
     bottom: 0;
     left: 0;
     padding: 10px 20px;
     position: fixed; 
     width: 100%;
     z-index: 1000;
}

  h1 {
     color: var(--couleur-texte-titre);
     font-size: 2.2rem;
     font-weight: 700;
     margin-bottom: 25px;
     margin-top: 0;
     text-align: center;
}

h2 {
     color: var(--couleur-texte-titre);
}

  .header-fixe {
     position: sticky;
     top: 0;
     width: 100%;
     z-index: 1000;
} 

  .home-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     max-width: 1100px;
     gap: 20px;
     margin-top: 40px;
}

   img {
     max-width: 100%;
     height: auto;
     object-fit: cover;
}
 

  .image-grisee {
    opacity: 0.6;
    filter: grayscale(20%); 
}

  .intro-flex {
     align-items: center;
     display: flex;
     gap: 30px;
}

  .photo-principale {
     border-radius: 8px;
     display: block;
     height: auto;      
     max-width: 100%;
     width: 150px;   
}

 .promo-card {
     background-color: var(--couleur-fond-carte); 
     border: 1px solid #c6893f;
     border-radius: 8px;
     flex: 1;
     padding: 25px;
}

  .promo-card blockquote {
     border-left: none;
     border-top: 4px solid #c6893f;
     margin: 15px 0 5px;
     padding: 0;
     width: 45px;
}

   .promo-card h2 {
     color: var(--couleur-texte-titre); 
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 15px;               
     margin-top: 15px;                  
     white-space: normal;
}

  .promo-card p {
     color: var(--couleur-texte-carte);
     font-size: 0.95rem;
     line-height: 1.5;
     margin-bottom: 0;
     margin-top: 15px;
}

  .promo-img {
     border-radius: 6px;
     display: block;
     height: 100%;
     object-fit: cover;
     width: 100%;
}

   .promo-photo-holder {
     height: 200px;
     overflow: hidden;
     width: 100%;
}

   .retour-haut {
     align-items: center;
     background-color: #283c50; 
     border: 1px solid #c6893f; 
     border-radius: 50%;        
     bottom: 50px;              
     color: #c6893f;            
     display: flex;
     font-size: 1.2rem;
     height: 40px;              
     justify-content: center;
     position: fixed;           
     right: 20px;               
     text-decoration: none;
     transition: all 0.2s ease;
     width: 40px;
     z-index: 999;              
}

   .retour-haut:hover {
     background-color: #c6893f; 
     color: #283c50;
} 



/*======================================
   VERSION TABLET & LAPTOP (1024px and less)
  ====================================== */

@media (max-width: 1024px) {
    .articles, .contenant-principal {
       max-width: 90%;
}
}


/*======================================
   VERSION MOBILE 768px and less
  ====================================== */

@media (max-width: 768px) {

   .articles {
       box-sizing: border-box;
       margin: 5px auto 40px;
       max-width: 100%; 
       overflow-x: auto;        
       padding: 10px; 
       width: 100%;            
}
    .articles p {
        font-size: 1rem;
        line-height: 1.5; 
}

    .articles table {
        display: block !important;
        width: 100% !important;
        min-width: 600px;
        overflow-x: auto;
        white-space: nowrap;
}

     .articles table::-webkit-scrollbar {
        height: 6px;
        display: block !important;
}

     .articles table::-webkit-scrollbar-thumb {
        background: #c6893f;
        border-radius: 4px;
}

     .articles table::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
}


     body {
        padding-bottom: 80px;
}

    .citation {
        font-size: 0.95rem;
        margin-top: 20px;
}

    .contenant-principal {
        box-sizing: border-box;
        margin: 10px auto 40px;
        max-width: 100%;         
        padding: 5px;
        width: 100%;            
}

     .contenant-principal p {
        font-size: 1rem;
        line-height: 1.5;
}

     div[style*="overflow-x: auto"]::-webkit-scrollbar {
        height: 6px;
        display: block !important;
}

    div[style*="overflow-x: auto"]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
}

    div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
        background: #c6893f;
        border-radius: 4px;
}

     .footer-contenu {
        flex-direction: column;
        gap: 12px;
        text-align: center;
}

     .footer-fixe {
        padding: 10px 10px;
}

     h1 {
        font-size: 1.8rem;   
        margin-bottom: 15px; 
}

    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        flex-direction: column;
        gap: 15px;
}

     .intro-flex {
        flex-direction: column;
        gap: 20px;
}

     .liens a {
        font-size: 0.85rem; 
}

     .liens li {
        margin-left: 4px; 
}

     .liens li:not(:last-child) {
        padding-right: 4px;
}
 
     .logo {
        max-width: 75%;
}

     .logo img.bbmew-logo {
        height: 55px;
        position: relative;
        top: 0px;
        margin-bottom: -20px; 
}
 
    .logo img.texte-logo {
       height: 22px; 
       margin-left: 6px;
}

    .menu1 {
       height: auto;
       padding-left: 10px;
       padding-right: 10px; 
       padding-top: 5px;
       padding-bottom: 5px;
}

    .promo-card {
       padding: 12px;
}

    .promo-card h2 {
       font-size: 0.95rem; 
        margin-top: 8px;
        margin-bottom: 8px;
        white-space: normal;
}

     .promo-photo-holder {
        height: 110px; 
}

     .promo-card .citation {
        font-size: 0.8rem;
        line-height: 1.3;
        margin-top: 8px;
        padding-left: 10px;
}

    .retour-haut {
        bottom: 85px;
        height: 40px;
        right: 15px;
        width: 40px;
}

    .slogan {
        font-size: 0.8rem;
        line-height: 1.2; 
}
     

}


/*======================================
   VERSION MOBILE  500px and less
  ====================================== */


@media (max-width: 500px) {

    .btn-langue {
        font-size: 0.7rem;
        padding: 5px 10px;
}

    .liens {
        flex-wrap: wrap;       
        justify-content: center; 
        gap: 3px 6px;         
}

    .liens a {
        font-size: 0.8rem;    
        padding: 2px 3px;      
        display: inline-block;
}

    .liens li {
        margin-left: 0;        
}

    .liens li:not(:last-child) {
        border-right: none;    
        padding-right: 0; 
}
    .retour-haut {
        bottom: 85px;
        height: 30px;
        right: 10px;
        width: 30px;
}
  
}


/*======================================
   VERSION MOBILE  375px and less
  ====================================== */


@media (max-width: 375px) {

    .btn-langue {
       font-size: 0.7rem;
       padding: 5px 10px;
}

    .footer-contenu {
        font-size: 0.72rem;
        gap: 6px;
        flex-direction: column;
        text-align: center;
}

    .footer-fixe {
       padding: 5px 5px;
}

    .liens {
        flex-wrap: wrap;       
        justify-content: center; 
        gap: 4px 8px;         
}

    .liens a {
        font-size: 0.65rem;
}

    .liens li {
        margin-left: 0; 
}

    .liens li:not(:last-child) {
        border-right: none;
        padding-right: 0; 
}  

    .logo img.texte-logo {
        height: 18px; 
}

    .retour-haut {
        bottom: 70px;
        height: 30px;
        right: 10px;
        width: 30px;
}

}
 
/* =======================================
   BARRE DÉFILEMENT OCRE SUR PC & MOBILE
   ======================================= */

     .table-responsive {
         scrollbar-width: thin;
         scrollbar-color: #c6893f #f1f1f1;
}

     .table-responsive::-webkit-scrollbar {
         height: 8px !important;
         display: block !important;
}

     .table-responsive::-webkit-scrollbar-thumb {
         background: #c6893f !important;
         border-radius: 4px !important;
}

     .table-responsive::-webkit-scrollbar-thumb:hover {
         background: #a36e2f !important; 
}

     .table-responsive::-webkit-scrollbar-track {
         background: #f1f1f1 !important;
         border-radius: 4px !important;
}