/*+++   NEWautoRecup.com :      +++++
+++++    css/css_new.css        +++++
+++++     TOUS LES CSS :        +++++
+++++ restructurés et nettoyés  +++++
+++++    màj le 15.3.2025       +++++
+++++++++++++++++++++++++++++++++++*/

/*
LES 7 STYLES GENERAUX (= qui s’appliquent à tout le site)   
*/



/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* COULEUR DE FOND SUR TOUTES LES PAGES DU SITE */
/*++++++++++++++++++++++++++++++++++++++++++++++*/

html {
  background-color: yellowgreen !important; /* Couleur de fond étendue */
}





/*+++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Calcul de la LARGEUR et HAUTEUR TOTALES DES PAGES */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++*/

* {
  box-sizing: border-box;
}
/*   Le sélecteur * est un sélecteur universel qui cible tous les éléments HTML de votre page.
box-sizing: border-box; modifie la façon dont la largeur et la hauteur totales des éléments sont calculées. Avec box-sizing: border-box;, la largeur définie inclut le contenu, le padding et les bordures.
.box-content aura une largeur totale de 350px (300px + 20px padding gauche + 20px padding droit + 5px bordure gauche + 5px bordure droite)
.box-border aura une largeur totale de 300px (le contenu sera réduit à 250px pour accommoder le padding et les bordures)
*/





/* ++++++++++++++++++++
++++    CENTRER    ++++ 
+++++++++++++++++++++*/
.center {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  /*display: block;
  width: 100%; 
  max-width: 750px; 
  margin-left: auto;  Ajoute ceci */
  /*margin-right: auto;  Ajoute ceci */
  /*text-align: center;  Ajoute ceci pour centrer les éléments inline-block à l’intérieur */
}




/* +++++++++++++=============+++++++
++++    CENTRER  LES  BOUTONS   ++++ 
+++++++==================+++++++++*/
.center button {
  display: inline-block; /* Permet aux boutons de se placer côte à côte */
  margin: 0 10px; /* Ajoute un espacement entre les boutons */
}




/*++++++++++++++++++++++++++*/
/* STYLE de TOUS les CADRES */
/*++++++++++++++++++++++++++*/
   .logo, .motto, .navbar, .main_content, fieldset {
      box-sizing: border-box; 
/* Inclut les bordures et paddings dans la largeur */
      width: 100%;
      max-width: 750px;
      overflow: hidden; /* Empêche le débordement */
      max-width: 100%; /* Limite la largeur à 100% du conteneur parent */
      padding: 0; /* Supprime les paddings inutiles */
      margin: 0 auto; /* Supprime toutes les marges et centre uniquement */
  }




/*+++++++++++++++++++++++++++++++++*/
/* LARGEUR DU MAIN CONTENT DU SITE */
/*+++++++++++++++++++++++++++++++++*/
/*pour donner la même largeur à TOUS les éléments constitutifs du site (tq : logo, slogan, navbar, contenu, et footer)
màj 16-3-2025 : désactivé ces réglages, déjà prévus ci-dessus (64: style de tous les cadres)
.main_content {
  width: 100%;
  max-width: 750px; 
}
*/




/*+++++++++++++++++++++++++*/
/*    Style du CONTAINER   */
/*+++++++++++++++++++++++++*/

/*
Cette règle CSS s'applique à tous les éléments ayant la classe "container".
Ce style est souvent utilisé pour créer des "cartes" ou des sections distinctes dans une page web, comme des formulaires, des zones de contenu ou des panneaux d'information. Il crée un conteneur visuellement distinct avec un fond légèrement grisé, des coins arrondis et un espace confortable autour de son contenu.
*/

/*
màj du 23-8-2024 : autre exemple de style de conteneur, plus souple, trouvé sur Chat GPT. A essayer plus tard...*/
.container {
  width: 100%; 
  /*Le conteneur occupera 100% de la largeur disponible de son parent.*/
  max-width: 750px; 
  /* Cependant, sa largeur ne dépassera jamais 750 pixels, même si l'espace disponible est plus grand. C'est une technique courante pour créer des mises en page responsive qui s'adaptent aux petits écrans mais ne deviennent pas trop larges sur les grands écrans.
  */
  display: flex; 
  /*Transforme le conteneur en un conteneur flexible (flexbox), un modèle de mise en page moderne qui facilite l'alignement et la distribution des éléments enfants.*/
  justify-content: center; 
  /*Centre horizontalement les éléments enfants dans le conteneur flex.*/
  align-items: center;
  /*Centre verticalement les éléments enfants dans le conteneur flex.*/
  border-radius: 15px;
  /*Arrondit les coins du conteneur avec un rayon de 15 pixels, créant des angles bien arrondis.*/
  background-color: yellowgreen;
  /*Définit un fond vert citron, pour le conteneur.*/
  padding: 20px;
  /* Ajoute un espace intérieur de 20 pixels tout autour du contenu.*/
}



/*
LE BODY
*/



/* +++++++++++++++++
++++    BODY    ++++ 
++++++++++++++++++*/
body {
  background-color: yellowgreen !important;
  font-family: roboto, arial, sans-serif;
  font-size: 20px;
  /*font-weight: 400;*/
  line-height: 1.5;
  color: green;
  text-align: left;
  width: 100%;
  max-width: 750px; /*largeur max du site à l'écran*/
  margin: auto;
  padding: 0px;     /*pour centrer le site*/
}








/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++   H E A D E R      +++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/


/*+++++++++++++++++*/
/* Style du HEADER */
/*+++++++++++++++++*/

.header {
  background-color: white;
  padding: 10px;
  text-align: center;
 }


/* Create two different columns that floats next to each other */
.cadrelangues {
  float: left;
  text-align: center;
  width: 10%;
  padding: 10px;
  height: auto;
  /*height: 126px;  Should be removed. Only for demonstration */
}

/* Create two equal columns that floats next to each other */
.cadrelogo {
  float: center;  
  /*Attention, float: center n'est pas une valeur valide en CSS (seuls left, right et none sont valides pour float). Si vous voulez centrer un élément, utilisez plutôt margin: 0 auto ou des techniques flexbox.*/
  text-align: center;
  width: 90%; 
  padding: 0px;
  /*height: 100px; je désactive ce réglage, qui se retrouvera dans .responsive         Should be removed. Only for demonstration */
}

.logoresponsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.responsive {
  width: 100%;
  max-width: 750px;   /*réactivé ce réglage ce 6.11.2024*/
  height: 100%;
}





/* +++++++++++++++++
++++    LOGO    ++++ 
++++++++++++++++++*/
.logo {
background-color: white; 
        font-family: roboto, sans-serif;
        font-size: 100px;
        color: green; 
        text-align: center;
        font-weight: 1000;  
        line-height: 1;
        width: auto;
        max-width: 750px; /*pour centrer le site*/
        padding: 10px 10px 0px 10px; 
        text-align: center;            
        margin: auto;
        border: solid white; 
        border-radius: 15px 15px 0px 0px;
}
        



/* +++++++++++++++++
++++    MOTTO   ++++ 
++++++++++++++++++*/
.motto {
background-color: green;
        font-family: roboto, sans-serif;
        font-size: 20px;
        font-weight:bold;
        color: white;
        width: auto;
        max-width: 750px; /*pour centrer le site*/
        text-align: center;
        margin: auto;
        padding: 5px;
        border: solid white;
        border-radius: 0px 0px 15px 15px;
}







/* ++++++=+++++++++++++++++++++++++++++++++++++++
++ BARRE DE NAVIGATION des 3 principaux menus...+ 
+++++++++++++++++++++++++++++++++++++++++++++++*/
.navbar {
  overflow: hidden;
  background-color: green;
  border: solid green;
  border-radius: 15px;
}

.navbar a {
  float: left;
  font-size: 21px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: underline;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  background-color: inherit;
  font-family: inherit;
  font-size: 21px;  
  color: white;
  text-decoration: underline;
  border: none;
  outline: none;
  padding: 16px;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color: green;
  border: 3px solid yellowgreen;
  border-radius: 15px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;
  float: left;
  text-align: left;
  color: green;
  text-decoration: underline;
  padding: 12px 16px;    
}

.dropdown-content a:hover {
  background-color: green;
  color: white;
  width: 100%;   /*ajouté ce style le 10-10-2024 le bgr col vert s'étend sur toute la largeur....*/
}

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



.active {   /*ajouté ce style le 10-10-2024, pur mettre en évidence le menu actuellement en cours */
background-color: white;
font-size: 25px;
border: 3px solid yellowgreen;
border-radius: 15px;
}





/*============================== */
/*====  BARRE DES LANGUES  ===== */
/*=  Style des la petite flèche =*/
/*==  (pointant vers le bas)   ==*/
/*============================== */
.utf-8_arrow_down{
font-size: 20px;
color: green;
border: 3px;
border-color: white;
}


/*  MISE EN FORME DES LISTES DEROULANTES (dans les formulaires : Cherche pièce, Vends épave, contact, démolisseur, essai)
  (en vert sur fond blanc - 
  s'inversent lors de la sélection)
*/

/* Style the select element */
  /* Style the select element */
  select {
    background-color: white;
    font-size: 22px;
    color: green;
    border: 1px solid green;
    padding: 5px;
    cursor: pointer;
  }

  /* Default style for options */
  /* ATTENTION : SYNTAXE : select option ou option????   */
  select option {
    background-color: white;
    color: green;
  } /* Default style for options */
  
  
  /* Style for the select element on hover */
  option:hover {
      background-color: green;
      color: white;
  }

  .additional-questions {   /*style des infos suppl. à fournir par l'utilisateur (p.ex. : qd cherche moteur : doit ajouter n° de châssis et code moteur)*/
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      }

  .additional-questions input {
      display: inline-block;
      margin-right: 10px;
      }







/*============================== */
/* === SCROLL 2 TOP BUTTON ===== */
/* ============================= */

#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 20px;
border: solid white;
border-width: 5px;
outline: none;
background-color: green;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 125%;
}

#myBtn:hover {
background-color: white;
color: green;
border: solid green;
border-width: 5px;
}





/*++++++++++++++++++++++++++++++++++
++++++  Gestion de l'AFFICHAGE  ++++
++++++    sur les SmartPhones   ++++
++++++     (moins de 600px)     ++++
++++++++++++++++++++++++++++++++++*/

/* 
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) 

Les media queries ci-dessous, sont bien structurées pour gérer l'affichage responsive de votre barre de navigation, sur les petits écrans (moins de 600px de large). 
*/

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}



/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++   M A I N   C O N T E N T    +++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/



/* ======================================= */   
/* ===  PRESENTATION DES 3 ACTIVITES   === */
/* ===      DANS 2 COLONNES EGALES     === */
/* === ET 2 COLONNES fusionnées en 1   === */
/* ======================================= */

.columns {
display: flex; /* Utilisez flexbox pour gérer la mise en page de l'ENSEMBLE des colonnes */
justify-content: space-between; /* Répartissez l'espace de manière égale entre les colonnes */
gap: 20px; /* Ajustez l'espace entre les colonnes selon vos besoins */
max-width: 750px; /* w3schools:100%  Assurez-vous que les colonnes occupent toute la largeur */
padding: 0 1px; /* padding: 0 20px; Ajoutez un padding si nécessaire pour éviter que les colonnes ne touchent les bords */
}

.column {
flex: 1; /* Faites en sorte que CHAQUE colonne prenne la même proportion de l'espace disponible */
min-width: 25%; /* w3schools : 30%.   Optionnel: ajustez cette valeur pour contrôler la largeur minimale des colonnes */
}






/* ====================== */   
/* ===  FORMULAIRES   === */
/* ====================== */



/*=============================== */ 
/* ===  ONE STEP FORM CSS   ===== */
/*=============================== */
  
/* Style inputs with type="text", select elements and textareas */
input[type=text], textarea, select {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  border: 3px solid green; /* Gray border */
  border-radius: 15px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
} 

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: green;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 3px white;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a green color */
input[type=submit]:hover {
  background-color: green;
}




/* Add a background color and some padding around the form 
.container {
  border-radius: 15px;
  background-color: #f2f2f2;
  padding: 20px;
}
*/







/*=============================== */ 
/* === MULTI STEPS FORM CSS ===== */
/*=============================== */
/*
#formdem {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
*/
/* Mark input boxes that gets an error on validation: */
/*
input.invalid {
  background-color: #ffdddd;
}
*/
/* Hide all steps by default: */
/*
.tab {
  display: none;
}

.button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}
*/
/* Make circles that indicate the steps of the form: 
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}
*/
/* Mark the steps that are finished and valid: 
.step.finish {
  background-color: #04AA6D;
}
*/
/*======================================== */ 
/*===== END OF MULTI STEPS FORM CSS ====== */
/*======================================== */





/* Create three equal columns that floats next to each other 
.column {
  background-color: #ffffff;
  border: 3px solid blue;
  float: left;
  width: 33.33%;
  padding: 0px;
  height: 500px;
}
*/
/* Clear floats after the columns 
.row:after {
  content: "";
  display: table;
  clear: both;
}
*/
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other 
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
*/
/* Style the footer 
.footer {
  color: white;
  background-color: #333333;
  padding: 20px;
  text-align: center;
}
*/





/*============================== */
/* ===  Style des INPUTS   ===== */
/* ===  <input> <select>   ===== */
/* ===   <dropdown list>   ===== */
/* ===<option> <option group> == */
/*  <submit> <reset> <password>  */
/* ============================= */


input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=month], input[type=checkbox], textarea {
  background-color: white;
  color: green;
  font-size: 20px;
  padding: 12px;
  margin-top: 10px;    /* (avant, c'était  6px)*/
  margin-bottom: 10px; /* (avant, c'était 16px)*/
  border: 3px solid green;
  border-radius: 15px;
  box-sizing: border-box;
  resize: vertical;
  }






/*++++++++++++++++++++++++++++*/
/* Style des BUTTONS SUBMIT   */
/*++++++++++++++++++++++++++++*/


button[type=submit] {
  background-color: green;
  font-size: 20px;
  color: white;
  padding: 15px 20px;
  margin: 20px;
  border: 3px solid white !important;
  border-radius: 15px;
  cursor: pointer;
  width: 250px;
  height: 70px;
  box-sizing: border-box;
  display: flex; /* Utilise Flexbox pour centrer */
  flex-direction: column;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  text-align: center;
  white-space: normal;
  transition: all 0.3s ease; /* Transition fluide pour le survol */
}

button[type=submit]:hover {
  background-color: white;
  color: green;
  border: 3px solid green !important;
  border-radius: 15px;
}

.boutons {
  display: flex;
  justify-content: center;
  gap: 20px;
}





/*+++++++++++++++++++++++++++++++*/
/* CSS pour aligner les bouton   */
/*+++++++++++++++++++++++++++++++*/

.buttons div {
  display: flex;
  gap: 10px; /* Espace entre les boutons */
}

/* Optionnel : Ajuster les boutons pour qu'ils aient une taille raisonnable */
.buttons button {
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}







/*+++++++++++++++++++++++++++++++++++++++++*/
/*   MediaQueries des BOUTONS SUBMIT       */
/*  (pour qu'ils s'affichent parfaitement  */
/* sur les Gsm, Smartphones, Tablettes,... */
/*+++++++++++++++++++++++++++++++++++++++++*/


@media (max-width: 600px) {
  button[type=submit] {
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 300px; /* Limite la largeur maximale */
    margin: 10px auto; /* Centre les boutons avec un espacement réduit */
  }
  .center {
    flex-direction: column; /* Affiche les boutons en colonne sur mobile */
    align-items: center;
  }
}



/*+++++++++++++++++++++++++*/
/* Style du bouton ENVOYER */
/*+++++++++++++++++++++++++*/

input[type=submit] {
  background-color: green;
  font-size: 20px;
  color: white;
  padding: 15px 20px;
  margin: 20px;
  border: 3px solid white !important;
  border-radius: 15px;
  cursor: pointer;
  width: 250px; /* Largeur fixe pour tous les boutons */
  height: 70px; /* Hauteur fixe pour tous les boutons */
  box-sizing: border-box; /* Inclut padding et bordure dans les dimensions */
  text-align: center; /* Centre le texte horizontalement */
  line-height: 1; /* Ajuste l'espacement vertical du texte */
  display: inline-block; /* Assure un bon comportement */
  /*white-space: nowrap;  Empêche le texte de passer à la ligne */
  display: flex;
  justify-content: center; /* Centre les boutons horizontalement */
  gap: 20px; /* Espace entre les boutons */
}

input[type=submit]:hover {
  background-color: white;
  color: green;
  border: 3px solid green !important;
  border-radius: 15px;
}


/*+++++++++++++++++++++++++*/
/* Style du bouton EFFACER */
/*+++++++++++++++++++++++++*/

input[type=reset] {
  background-color: grey;
  font-size: 20px;
  color: white;
  padding: 15px 20px;
  margin: 20px;
  border: 3px white;
  border-radius: 15px;
  cursor: pointer;
}

/*input[type=submit]:hover {   */
input[type=reset]:hover {
  background-color: white;
  color: grey;
  border: 3px white;
  border-radius: 15px;
}



/* ========================================= */
/* === BUTTON GROUP (màj le 16-4-2024) ===== */
/* ========================================= */

btn-group { 
  display: block;
  background-color: green; /* Green background */ 
  font-size: 25px;
  color: white; /* White text */ 
  padding: 15px 30px; /* Some padding */ 
  margin-left: auto;
  margin-right: auto;
  border: 3px solid white; /* Grey border */ 
  border-radius : 15px;
  cursor: pointer; /* Pointer/hand icon */ 
  float: center; /* Float the buttons side by side. Attention, float: center n'est pas une valeur valide en CSS (seuls left, right et none sont valides pour float). Si vous voulez centrer un élément, utilisez plutôt margin: 0 auto ou des techniques flexbox. */ 
} 
    
  /* Clear floats (clearfix hack) */ 
  .btn-group:after { 
  content: "";       
  clear: both; 
  display: table; 
} 
    
  .btn-group button:not(:last-child) { 
  border-right: none; /* Prevent double borders */ 
 } 
    
  /* Add a background color on hover */ 
  .btn-group button:hover { 
  background-color: white; 
  color: green;
  }





/*  MISE EN FORME DES LISTES DEROULANTES (dans les formulaires : Cherche pièce, Vends épave, contact, démolisseur, essai)
  (en vert sur fond blanc - 
  s'inversent lors de la sélection)
*/

/* Style the select element */
  /* Style the select element */
  select {
    background-color: white;
    font-size: 22px;
    color: green;
    border: 1px solid green;
    padding: 5px;
    cursor: pointer;
  }

  /* Default style for options */
  /* ATTENTION : SYNTAXE : select option ou option????   */
  select option {
    background-color: white;
    color: green;
  } /* Default style for options */
  
  
  /* Style for the select element on hover */
  option:hover {
      background-color: green;
      color: white;
  }

  .additional-questions {   /*style des infos suppl. à fournir par l'utilisateur (p.ex. : qd cherche moteur : doit ajouter n° de châssis et code moteur)*/
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      }

  .additional-questions input {
      display: inline-block;
      margin-right: 10px;
      }





/* ===================================== */
/* === STYLE de la balise <LEGEND> ===== */
/* ===================================== */

legend {
/* Styles spécifiques pour les cadres du texte explicatif */
box-sizing: border-box !important;  
width: 100%;
max-width: 750px;
text-align: left;
background-color: green;
font-family: roboto, sans-serif;
font-size: 25px;
color: white;
padding: 15px !important; /* en conflit avec l'instruction de la ligne 758padding: 0; Supprime les paddings inutiles */
margin: 0 !important;
border: 3px solid green; /* Uniformise la bordure */
border-radius: 15px 15px 0px 0px;
border-bottom: none; /* Pas de bordure en bas pour se connecter au fieldset */
}
  


  
/*=================================== */   
/*=====  Pour faire un FIELDSET ===== */
/*=================================== */  

fieldset {
  box-sizing: border-box !important;
  background-color: white;
  text-align: left;
  font-family: roboto, sans-serif;
  font-size: 20px;
  color: green;
  padding: 15px !important;
  margin: 0 !important;
  overflow: hidden; /* Empêche le débordement */
  max-width: 100%; /* Limite la largeur à 100% du conteneur parent */
  border: 3px solid green; /* Uniformise la bordure */
  border-radius: 0px 0px 15px 15px;
  border-top: none; /* Pas de bordure en haut pour se connecter au legend */
}




/* ================================== */
/* === STYLE de classe <LEGEND> ===== */
/* ================================== */
/* Styles spécifiques pour les cadres du texte explicatif */
.legend_style {
  box-sizing: border-box !important;
  width: 100%; /*(avant, c'était : auto)*/
  max-width: 750px;/*pour centrer le site*/
  background-color: green;
  font-family: roboto, sans-serif;
  font-size: 25px; 
  text-align: left;
  color: white;/* White text */
  overflow: hidden; /* Empêche le débordement */
  padding: 15px !important; /* en conflit avec l'instruction de la ligne 758padding: 0; Supprime les paddings inutiles */
  margin: 0 !important;
  border: 3px 3px 0px 3px;
  border-color: solid white;
  /*avant, c'était : border: 3px solid white;  Uniformise la bordure */
  border-radius: 15px 15px 0px 0px;
  border-bottom: none; /* Pas de bordure en bas pour se connecter au fieldset */
}

  


  
/*===================================== */   
/*=====  STYLE de classe FIELDSET ===== */
/*===================================== */  

.fieldset_style {
  display: block;
  width: auto;
  overflow: hidden; /* Empêche le débordement */
  max-width: 750px; /*pour centrer le site*/
  background-color:white;
  text-align: left;
  font-family: roboto, sans-serif; 
  font-size: 20px;
  color: green; 
  padding: 15px; /* Some padding */
  margin: 0px; 
  /*margin-left: auto;
  margin-right: auto;*/
  border: 0px 3px 3px 3px; 
  border-color: solid green;
  border-radius: 0px 0px 15px 15px;
}






/*=============================== */   
/* ========== TABLE ============= */
/*=============================== */ 

table {
  overflow-x: auto;/*pour le rendre responsive*/
  width: 100%;
  padding: 0px; 
  margin: 0px;
  /*margin-left: auto; 
  margin-right: auto;*/
  border-spacing: 0; 
  /*avant, c'était : cellspacing: 0; Cette propriété était en fait un attribut HTML plutôt qu'une propriété CSS standard. Elle était utilisée dans les balises <table> pour définir l'espace entre les cellules adjacentes d'un tableau.
  Quand vous définissez cellspacing: 0;, cela signifiait qu'il n'y aurait aucun espace entre les cellules du tableau. Les cellules seront directement collées les unes aux autres, sans aucun espacement.
  En CSS moderne, cet effet est généralement obtenu avec la propriété border-collapse: collapse; que nous avons vue dans l'exemple précédent, ou en utilisant border-spacing: 0; qui est l'équivalent CSS de l'attribut HTML cellspacing.*/
  border: 3px solid green;
  border-radius: 0px 0px 20px 20px;
  font-family: roboto, sans-serif; 
  } 

    
th { 
  background-color: green;
  color: white;
  font-size: 25px; 
  text-align: center; 
  } 
    
    
td { 
  font-size: 20px; 
  text-align: left; 
  } 

  table tr:nth-child(even) { 
    background-color: #eee;
    color: #808080;
    } 
      
  table tr:nth-child(odd) { 
    background-color:lightgreen; 
    color: white;
    } 
/*
table tr:nth-child(even) { 
  background-color: #eee; 
  border: 3px solid green;
  border: 3px solid white;
  } 
    
table tr:nth-child(odd) { 
  background-color:lightgreen; 
  border: 3px solid green;
  } 
*/   

/*
table.center {
  width: 100%;
  margin-left: auto; 
  margin-right: auto;
  }
*/


/*
  .imagecenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
*/





/*=============================== */   
/* ====   TABLE Chat GPT   ====== */
/*=============================== */ 
/* Style pour le tableau */
.parts_wanted_list {
width: 100%;
border-collapse: collapse;
border: 3px solid white;
border-radius: 15px;
}

/* Style pour l’en-tête */
.parts_wanted_list thead th {
background-color: green; /* Couleur de l'en-tête */
color: white;
padding: 8px;
text-align: left;
font-weight: bold;
}

/* Style pour les cellules du corps du tableau */
.parts_wanted_list tbody td {
padding: 8px;
border-top: 1px solid #ddd;
}

/* Style pour les lignes paires */
.parts_wanted_list tbody tr:nth-child(even) {
background-color: white !important; /* Assure le fond vert */
color: green !important; /* Assure le texte blanc */
}

/* Style pour les lignes impaires */
.parts_wanted_list tbody tr:nth-child(odd) {
background-color: lightgreen!important;
color: green !important;
}

/* Style pour le tableau (Ce code CSS s'applique à un tableau qui se trouve dans une structure HTML spécifique. )*/
div.parts_wanted_list_wrapper .parts_wanted_list {
/*Ce sélecteur cible un élément avec la classe parts_wanted_list qui est descendant d'un div ayant la classe parts_wanted_list_wrapper. Il s'agit probablement d'un tableau ou d'un élément qui se comporte comme un tableau.*/
width: 100%;  
/*définit la largeur du tableau à 100% de son conteneur parent, ce qui signifie que le tableau s'étendra sur toute la largeur disponible.*/
border-collapse: collapse; 
/*fusionne les bordures des cellules adjacentes du tableau en une seule bordure, au lieu d'avoir des bordures séparées pour chaque cellule. Cela donne un aspect plus propre et uniforme au tableau.*/
border: 3px solid white !important;
/*Cette propriété ajoute une bordure blanche solide de 3 pixels d'épaisseur autour du tableau. Le !important est utilisé pour s'assurer que cette règle prend priorité sur d'autres règles de style qui pourraient affecter la bordure.*/
border-radius: 15px;
}

/* Style pour l’en-tête */
div.parts_wanted_list_wrapper .parts_wanted_list thead th {
background-color: green !important; /* Couleur de l'en-tête */
color: white !important;
padding: 8px;
text-align: left;
font-weight: bold;
}

/* Style pour les cellules du corps du tableau */
div.parts_wanted_list_wrapper .parts_wanted_list tbody td {
padding: 8px;
border-top: 1px solid #ddd !important;
}

/* Style pour les lignes paires */
div.parts_wanted_list_wrapper .parts_wanted_list tbody tr:nth-child(even) {
background-color: green !important;
color: white !important;
}

/* Style pour les lignes impaires */
div.parts_wanted_list_wrapper .parts_wanted_list tbody tr:nth-child(odd) {
background-color: white !important;
color: green !important;
}




/*=====================+++++++==== */
/* === CSS pour les photos   ===== */
/* === du menu Vends Epave   ===== */  
/* ===============+++++++========= */
.btn {   /* Style des boutons, en général*/
  display: inline-block;
  width: 200px; /* Adjust width as needed */
  height: auto; /*màj le 24-4-2025*/
  background-color: green;
  font-size: 20px;
  color: white;
  text-align: center;
  padding: 12px 20px;
  margin: 10px;
  cursor: pointer;
  border: 3px solid white;/*none;*/
  border-radius: 15px;
}
.btn i {
  margin-right: 10px;
}
.photos-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.photos-wrapper .form-group {
  text-align: center;
  margin-bottom: 20px;
}









/*========================= */ 
/* === PAGINATION CSS ===== */
/*========================= */

pagination a {
  width: 100%;
  font-family: roboto, sans-serif;
  font-size: 25px;
  padding: 15px;
  margin: 20px;
  border: 3px solid #ccc;
  border-radius: 7px;
  /*box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;*/
  resize: vertical;
  color: black;
  margin: 0 auto;
  /* Avant, c'était float: center , masi ce contrôle n'est pas une valeur valide en CSS (seuls left, right et none sont valides pour float). Donc, pour centrer ma pagination, j'ai remplacé float: center, par margin: 0 auto. */ 
  text-decoration: none;
  /* désactivé ce contrôle : transition: background-color .3s;*/
}

pagination a.active {
  background-color: green;
  color: white;
}

pagination a:hover:not(.active) {background-color: #ddd;}





/*++++++++++++++++++++++++++++++++++++++++++++++++++ */ 
/*++++  AUTRES CONTROLES : <HR> et BREADCRUMB  +++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++ */



/*================================== */ 
/* === HORIZONTAL RULES STYLES ===== */
/*================================== */

/* Green border */
hr.simple {
  border-top: 5px solid green;
}

/* Dashed green border */
hr.dashed {
  border-top: 5px dashed green;
}

/* Dotted green border */
hr.dotted {
  border-top: 5px dotted green;
}

/* Thick green border */
hr.complex {
  border: 5px solid green;
}

/* Large rounded green border */
hr.large {
  border: 10px solid green;
  border-radius: 7px;
}

/*
Et voici comment appeler ces styles de HR
<hr class="simple">
<hr class="dashed">
<hr class="dotted">
<hr class="complex">
<hr class="large">
*/






/*======================= */
/* ===  BREADCRUMB  ===== */
/* ====================== */

ul.breadcrumb {
  padding: 1px 5px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}



/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++     avec une couleur JAUNE FLUO        ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-yellow {
  color: white; /* Texte en blanc */
  background-color: yellowgreen; /* Fond vert */
  -webkit-text-stroke: 2px #FFFF00; /* Contour jaune fluo */
}




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++     avec une couleur VERTE FLUO        ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-green {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px #00FF00; /* Contour vert fluo */
}





/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++       avec une couleur BLEUE FLUO      ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-blue {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px #00FFFF; /* Contour bleu fluo */
}





/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++     avec une couleur ORANGE FLUO       ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-orange {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px #FF4500; /* Contour orange fluo */
}




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++       avec une couleur MAUVE           ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-purple {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px #FF00FF; /* Contour mauve fluo */
}




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER un <h2> avec un    ++++ */
/* ++++  texte VERT, avec une couleur BLANC     ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* 
(màj du 25.3.2025 : désactivé le code, qui ne fonctionnait pas)
*/




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte VERT    ++++ */
/* ++++       avec une couleur BLANC           ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-white {
  color: green !important; /* Texte en blanc */
  background-color: yellowgreen !important; /* Fond vert citron */
  -webkit-text-stroke: 2px white !important; /* Contour blanc */
}




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++       avec une couleur NOIRE           ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-black {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px black; /* Contour noir */
}




/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour ENTOURER du texte BLANC    ++++ */
/* ++++     avec une couleur GRIS FONCE        ++++ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rounded-grey {
  color: white; /* Texte en blanc */
  background-color: green; /* Fond vert */
  -webkit-text-stroke: 2px #333333; /* Contour gris foncé */
}





/*+++++++++++++++++++++++++++++++++++++++++++++*/
/* ++++  Style pour le TABLEAU DES PERFS  ++++ */
/* ++++         d'AutoRecup               ++++ */
/*+++++++++++++++++++++++++++++++++++++++++++++*/

/* Structure de base pour les statistiques */
.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 15px 0;
}

.stat-box {
  flex: 1 0 200px;
  min-width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.stat-box h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #006400;
  font-size: 1em;
}

.stat-value {
  font-size: 1.8em;
  font-weight: bold;
  color: #006400;
  display: flex;
  align-items: center;
}

/* Styles pour les indicateurs de tendance */
.trend {
  font-size: 0.5em;
  margin-left: 10px;
  padding: 3px 5px;
  border-radius: 3px;
  display: inline-block;
}

.trend.positive {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.trend.negative {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.trend.neutral {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
}


        /* Graphiques */
        .chart-container {
          width: 100%;
          height: 300px;
          margin: 20px 0;
      }
      
      /* Media queries pour les smartphones */
      @media screen and (max-width: 600px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive a.icon {
              position: absolute;
              right: 0;
              top: 0;
          }
          .topnav.responsive a {
              float: none;
              display: block;
              text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
              display: block;
              width: 100%;
              text-align: left;
          }
          
          /* Ajustements supplémentaires pour mobile */
          .container {
              width: 100%;
              padding: 10px;
          }
          
          .stat-box {
              flex: 1 0 100%;
          }
          
          .logo {
              max-width: 80%;
          }
          
          fieldset {
              padding: 10px;
          }
          
          .stat-value {
              font-size: 1.5em;
          }
          
          .top-list {
              font-size: 0.9em;
          }
          
          .chart-container {
              height: 200px;
          }
      }


.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.stat-box {
    flex: 1 0 200px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.stat-box h3 {
    margin-top: 0;
    color: #555;
    font-size: 0.9em;
}

.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    color: #2a8000;
    margin: 10px 0;
}

.top-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.top-list th, .top-list td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.top-list th {
    background-color: #f2f2f2;
    color: #555;
}

.top-list tr:nth-child(even) {
    background-color: #f9f9f9;
}

.stat-box {
  word-wrap: break-word; /* Permet aux mots longs de se couper */
  overflow: hidden; /* Empêche le débordement */
}

.trend {
  font-size: 0.8em;
  margin-left: 10px;
  display: inline-block; /* Permet un meilleur contrôle de l'affichage */
}
.trend.positive {
  color: #2ecc71;
}
.trend.negative {
  color: #e74c3c;
}
.trend.neutral {
  color: #3498db;
}


 /*SECTION*/
  section{padding:2%; }
  .item-gridi{border-radius:12px 12px 12px 12px; background-color:white; padding-left:3%; padding-right: 3%; padding-top: 3%; padding-bottom: 6%;}
  #more1 {display: none;}
  #more2 {display: none;}
  #more3 {display: none;}
  .item-gridi h3{font-weight: bolder;}
  .item-gridi p{color:#29a24a;}
  .item-gridi mark{background-color: #cffbda;}
  .btn_appel{background-color: #29a24a; border-radius: 12px 12px 12px 12px; color:white; font-weight: bold; padding:5%; border:none;}
  .container-warning{background-color: rgb(181, 75, 36); border-radius: 12px 12px 12px 12px; font-size:20px;color:white; padding:1%;}
  .link_general_cond{color:#53ebd9; font-weight: bold;}
  
  /*FOOTER*/
  footer{margin-top:50px;}
  .li_footer{display: block; background-color: white; border-radius: 12px 12px 12px 12px; padding: none; border-bottom: #2F2E33 solid 5px;}
  .uk-accordion-title{font-weight:bolder;}
  .uk-accordion-content{padding: 2%; background-color:rgb(249, 249, 249); width: 100%;}
  
  
  #totopmyBtn {
     display: none;
     position: fixed;
     font-weight: bold;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     font-size: 18px;
     border: none;
     outline: none;
     background-color: rgb(164, 224, 167);
     color: black;
     cursor: pointer;
     padding: 15px;
     border-radius: 4px;
     border: solid white 5px;
   }
   
   #toptopmyBtn:hover {
     background-color: rgb(83, 163, 87);
   }
  
.container_h1{background-color: rgb(131, 40, 40); padding:2%; border-radius: 8px 8px 0px 0px;}
.container_h1 h1{color:white;}
.container_form{background-color: white;margin-top:80px;padding:3%; border-radius: 8px 8px 8px 8px; border:4px green solid;}

@media (min-width: 320px) and (max-width: 812px) {
  
  .responsive_margin {margin-top:20px;}
} 

  /*device-iphone5*/
    
@media(max-width: 320px )and (max-width: 320px){

.responsive_margin {margin-top:20px;}
}     



/*LOGIN

*/

.container_form_log{background-color: white;padding:3%; border-radius: 8px 8px 8px 8px; border:4px green solid;}