/* responsive design */
@import url("responsive/320.css") screen and (min-width: 320px) and
  (max-width: 480px);
@import url("responsive/480.css") screen and (min-width: 480px) and
  (max-width: 768px);
@import url("responsive/768.css") screen and (min-width: 768px) and
  (max-width: 1024px);
@import url("responsive/1024.css") screen and (min-width: 1023px) and
  (max-width: 1280px);
@import url("responsive/1280.css") screen and (min-width: 1280px) and
  (max-width: 1440px);
@import url("responsive/1440.css") screen and (min-width: 1440px) and
  (max-width: 1760px);
@import url("responsive/1760.css") screen and (min-width: 1760px) and
  (max-width: 1920px);
@import url("responsive/1920.css") screen and (min-width: 1920px) and
  (max-width: 3072px);
@import url("responsive/3072.css") screen and (min-width: 3072px);
/* Variables CSS */
:root {
  --color-primary: #7d6e63;
  --color-secondary: #b19a8b;
  --color-background: #faf3e0;
  --color-hover: rgb(200, 240, 200);
  --color-text: #000000;
  --color-light: #f8f9fa;

  --border-radius-sm: 10px;
  --border-radius-lg: 15%;
  --box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.41);

  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 20px;

  --font-main: Arial, sans-serif;
}

/* Classes utilitaires */

.class_flex {
  display: flex;
}
.display_grid {
  display: grid;
}
.class_flex_wrap {
  flex-wrap: wrap;
}
.class_justify_center {
  justify-content: center;
}
.classe_row_reverse {
  flex-direction: row-reverse;
}
.class_aligne_items_center,
.aligne_item_center {
  align-items: center;
}
.aligne_content_center {
  align-content: center;
}
.class_column {
  flex-direction: column;
}
.class_shadow {
  box-shadow: var(--box-shadow);
}
.class_border {
  border: 1px solid var(--color-text);
}
.class_border_radius {
  border-radius: var(--border-radius-sm);
}
.class_box_sizing {
  box-sizing: border-box;
}
.text_decoration_none {
  text-decoration: none;
}
.position_relative {
  position: relative;
}

.generic {
  display: flex;
  align-items: center;
}
.generix1 {
  display: flex;
  flex-direction: column;
}

.generix2 , #je_donne_mon_avis{
  display: flex;
  justify-content: center;
  align-items: center;
}
.generix3 {
  display: flex;
  justify-content: center;
}
.generix4 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
select#id_etat{
  display: flex;
  justify-self: center;
}
/* Scrollbar personnalisée */
.class_scroll {
  overflow-y: auto;
  width: 100%;
  scrollbar-color: rgba(150, 200, 150, 1) rgba(220, 220, 220, 0);
  padding-bottom: var(--spacing-md);
}
ul.class_flex {
  gap:var(--spacing-md);
}
ul.resultat {
  display: flex;
}
/* Reset et base */
* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  font-family: var(--font-main);
  min-height: 100vh;
}
/* Header */
header.position_relative > div > div > div.class_flex {
  justify-content: space-between;
}
header {
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
}

header h1 a,
header a {
  color: var(--color-text);
}

.photo_profile,
.photo_default,
label#resultat_recherche img,
#covoit_reserver img {
  border-radius: var(--border-radius-lg);
}

.photo_default {
  background-image: url("../photo/photo_default.jpg");
  background-size: cover;
}

#logo {
  display: flex;
}
/* Footer */
footer {
  gap: 30px;
  padding: 0;
  margin-top: auto;
  margin-bottom: var(--spacing-sm);
}

footer a {
  color: var(--color-text);
  height: 30px;
}
a {
  text-decoration: none;
  color: black;
  display: flex;
  justify-content: center;
}
.footer {
  border-radius: var(--border-radius-sm);
  background-color: var(--color-primary);
  color: white;
}
.footer-link {
  text-decoration: none;
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.resultat input[type="radio"],
form#filtre_form label,
#recherche_form label ,
#contact_form p label,
.label-hidden ,
form#etat_form > label,
#reservation_form > label,
#contact_form label{
  display: none;
}

/* Éléments de formulaire */
button,
select,
input {
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--color-text);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--box-shadow);
  text-align: center;
}

button {
  background-color: var(--color-primary); /* #7D6E63 marron */
  color: var(--color-light);
}

select {
  background-color: var(--color-light);
}
input {
  background-color: var(--color-light);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* États de survol */
input:hover,
button:hover,
.footer:hover,
option:hover,
select:hover,
#recherche_form button:hover,
div#reservation > div > form#reservation_form > select:hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}

/* Composants spécifiques */
.resultat input[type="radio"]:hover ~ label#resultat_recherche,
#covoit_proposer input[type="radio"]:hover ~ label,
.conteneur_recherche2
  .resultat
  input[type="radio"]:hover
  ~ label#resultat_recherche,
#covoit_proposer:hover,
#covoit_reserver:hover {
  background: var(--color-primary);
  color: var(--color-light);
}

::placeholder {
  color: var(--color-text);
}

.p_deco {
  box-shadow: 6px 6px 10px beige;
  background-color: rgb(120, 180, 120);
  color: blanchedalmond;
  text-shadow: 1px 1px 2px black;
}

a:hover {
  color: #a7c7a5;
}

/* Layout principal */
.image-principal {
  background-size: cover;
  background-position: center;
}

/* Section présentation */
.presentation {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  align-content: center;
}

.presentation > div p {
  padding: var(--spacing-lg);
  flex: 1;
}

.presentation img {
  width: 45%;
  height: 70%;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}
/*connection*/
/* Ajouter ces classes */
.account-link {
  display: flex;
  text-decoration: none;
  flex-direction: column;
  align-items: center;
}

.admin-link {
  text-decoration: none;
  color: var(--color-text);
}
#inscription label, form#trajet_terminer_form > label, form#demarrer_ou_annuler_form > label {
  display: none;
}

#inscription,
#login1,
#login2,
#reset_mdp,
#validation_email {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-text);
  box-shadow: var(--box-shadow);
}

/* Formulaire de recherche */
#recherche_form {
  gap: 0;
  padding: var(--spacing-md);
  font-size: 16px;
  margin-bottom: var(--spacing-lg);
}

.conteneur_recherche {
  width: 100%;
}

.conteneur_recherche2 {
  background-color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-md);
}
#selection_trajet {
  margin-bottom: var(--spacing-lg);
}
/* block présentation */
.presentation-flex {
  display: flex;
  position: relative;
  align-items: center;
}

.presentation-flex-reverse {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: row-reverse;
}


/* Résultats */
.resultat {
  gap: var(--spacing-lg);
}



.resultat label {
  border-radius: 10px;
  background-color: #f8f9fa;
  padding: 10px;
}

form#selection_trajet button, select#id_etat
{
  height: 30px;
  margin-bottom: 15px;
}

/* Style de base pour les labels */
label#resultat_recherche {
  border-radius: var(--border-radius-sm);
  background-color: var(--color-light);
  padding: var(--spacing-md);
}

/* État checked */
.resultat [type="radio"]:checked ~ label#resultat_recherche {
  color: var(--color-text);
  border-bottom: 1px solid white;
  background-color: var(--color-hover);
  border-radius: var(--border-radius-sm);
  display: flex;
  z-index: 1;
}

/* Formulaire de contact */
#contact_form {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-lg);
  align-items: center;
}


#contact_form button {
  display: flex;
  align-self: center;
  align-items: center;
  margin-top: var(--spacing-md);
}

/* Bouton réserver et formulaire trajet */
#reservation_form button,
#form_trajet button {
  background-color: var(--color-primary);
  color: white;
}
/*--------------Block RESERVATION--------------*/
div#reservation {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
  justify-content: center;
}

div#reservation > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-secondary);
  box-shadow: var(--box-shadow);
  border: solid 2px black;
}
/**----Photo chauffeur------*/

div#reservation > div > img.photo_profile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 102%;
  height: 100%;
  border-radius: 15% 0 0 15%;
}

div#reservation > div:nth-child(1) {
  border-radius: 15% 0 0 15%;
}

/*--- Partie info trajet ---*/


#chauffeur_trajet {
  border: solid 2px var(--color-text);
  width: 100%;
  justify-content: center;
  display: flex;
  background-color: var(--color-hover);
}

#prix_trajet {
  border: solid 2px var(--color-text);
  width: 100%;
  justify-content: center;
  display: flex;
  background-color: var(--color-hover);
}

#info_trajet > div > p {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--color-light);
}

div#info_trajet > div#info_trajet {
  margin: 20%;
}

/*--- Partie info chauffeur ---*/

div#reservation > div:nth-child(3) {
  border-radius: 0 15% 15% 0;
}

form#reservation_form > div > ul {
  gap: 20px;
}


#reservation_form > ul {
  margin: 0px;
}
form#etat_form > div > ul {
  gap: 20px;
}
form#etat_form select,
form#etat_form button,
#reservation_form select,
#reservation_form button {
  margin: 5px;
}
form#etat_form select,
#reservation_form select {
  display: flex;
  justify-self: center;
}
form#reservation_form > a.btn.btn-primary {
  color:red;
}
div#gain_plateforme {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.success, .error, .info{
  display: flex;
  justify-content: center;
}
.success {
  color: green;
}
.error {
  color: red;
}
.info {
  color: blue;
}