body {
    background-color: #E8ECEF;
  }

  .centered {
      padding-top: 200px;
      text-align: center;
  }

  .centered1 {
    padding-top: 100px;
    text-align: center;
}

  .secret-text {
    text-align: center;
    font-size: 2rem;
    color: #fff;
    background-color: #000;
  }
  #topbar {
    background-color: #343a40;
    color: #fff;
    display: block;
  }  

  /* ALL */
:root{
    --color-primary: #3586ff;
    --color-dark-grey: #3a3a3a;
    --color-grey: #9f9f9f;
    --color-light-grey: #cdcdcd;
    --color-red: #bb2222;
  }
  
  /* NAVBAR */
  .nav-item {
      text-transform: uppercase;    
      font-weight: bold;
  }
  .navbar-brand {
      font-size: .8rem;
  }
  .navbar{
      top: 50px;
      position: fixed;
      width: 100%;
      z-index: 1001;    
  }
  li a .nav-link:active {
      color: white;    
  }
  
  /* TOPBAR */
  #topbar{
    position: absolute;
      position: fixed;
      width: 100%;
      background-color: var(--color-dark-grey);
      height: 50px;
      color: var(--color-light-grey);
      text-align: center;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
      flex-basis: 150px;     
      z-index: 1001;
     
  }
  #phone{
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-light-grey); 
      padding-top: 3px;   
  }
  #email-cartocool{
    font-size: 0.9rem;
    font-weight: 500;  
      padding-top: 3px;    
  }
  #email-cartocool a{
    color: var(--color-light-grey);
      font-weight: 500;
      font-size: 0.9rem;  
      text-decoration: none;
  }
  #email-cartocool a:hover{
    color: white;
  }
  #address{
    color: var(--color-light-grey);
      font-weight: 500;
      font-size: 0.9rem;
      padding-top: 3px; 
  }
  #login a{
    color: var(--color-light-grey);
      font-weight: 500;
      font-size: 0.9rem;
      text-decoration: none;
  }
  #login a:hover{
    color: white;
  }
  
  /* HEADINGS */
  h3{
      color: var(--color-dark-grey);
      font-weight: bold;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 30px;
      text-decoration: overline var(--color-red);
  }


  .map-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .map1{
    width: 50%;
    height: 50%;
    margin: 20px;
  }
  .alert{
    margin: 20px;
  }
  #metrouver{
    width: 100%;
  }
  
  /* FOOTER */
  footer p{    
      color: var(--color-light-grey);
      text-align: center;
      padding: 10px;    
      bottom: 0;
      width: 100%;
  }
  
  footer p:hover{
      color: white;
  }
  
  footer {
      position: relative;
      width: 100%;
      background: var(--color-dark-grey);
      min-height: 100px;
      padding: 20px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color:  var(--color-light-grey);
      font-size: 14px;
    }    
    
    #up {
      font-size: 24px;
      font-weight: bold;
      color: rgb(224, 10, 10);
      text-align: center;
    }

    .footer-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      color: efefef;
    }
    .footer-nav a {
      color: var(--color-light-grey);
      text-decoration: none;
      font-size: 14px;
      color: #efefef;      
    }
    .footer-nav a:hover {
      color: white;
      font-weight: bold;
    }

    .mouse-position {
      font-family: Arial, sans-serif;
      background-color: white;
      padding: 4px 8px;
      border-radius: 5px;
      box-shadow: 0 0 4px rgba(0,0,0,0.3);
      font-size: 12px;
    }

    .features {
    background-color: #f9f9f9;
    padding: 30px;
    margin: 40px auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    max-width: 850px;
    font-family: "Segoe UI", sans-serif;
    line-height: 1.6;
  }

  .features h3 {
    font-size: 1.6rem;
    color: #2c3e50;
    margin-bottom: 20px;
  }

  .features ul {
    list-style: none;
    padding-left: 0;
  }

  .features ul li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
  }

  .features ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
  }

  .features b {
    color: #2c3e50;
  }

  .features p {
    margin-top: 20px;
    background-color: #fff3cd;
    border-left: 5px solid #ffe08a;
    padding: 15px 20px;
    border-radius: 8px;
  }

  .features ol {
    margin-top: 10px;
    padding-left: 20px;
  }

    
  
    /********************************************************/
  
    @media only screen and (max-width: 768px) {
      #topbar {
        flex-wrap: wrap;
        height: auto;
      }
      .navbar{
        top: 30px;
      }
      footer {
        padding: 20px 20px;
      }    
      footer .menu {
        flex-direction: column;
      }
      footer .social_icon {
        flex-wrap: wrap;
        padding-left: 3px;
      }
      footer .social_icon li a,
      footer .menu li a {
        margin: 10px 0;
        text-align: center;
      }
      #yaercopy{
        text-align: center;
      }
      #developpeur{
        text-align: center;
      }
    
      /* HEADINGS */
      h3{  
        margin-top: 35px;
        margin-bottom: 20px; 
         
      }
      /* h3 .actu{
        margin-top: 120px;   
      } */
      
    }
  
    @media only screen and (max-width: 400px) {
      #topbar {
        flex-wrap: wrap;
        height: auto;
      }
      .navbar{
        top: 60px;
      }
      #actu1{
        top: 200px;
      }
      /* HEADINGS */
      h3{ 
        margin-top: 85px;
        margin-bottom: 20px;
      }
      
      
    }
  
    @media only screen and (max-width: 300px) {
      #topbar {
        flex-wrap: wrap;
        height: auto;
      }
      .navbar{
        top: 100px;
      }
      #actu1{
        top: 280px;
      }
      /* HEADINGS */
      h3{ 
        margin-top: 125px; 
        margin-bottom: 20px;
      }
      
      
    }