/* ==========================================================================
   PAGE : EXPÉDITION APPAREIL
   ========================================================================== */

/* --- En-tête de la page --- */
.expedition-page-section .page-header {
  text-align: center;
  margin-bottom: 3rem; /* Augmenté pour plus d'espace avant les instructions */
}

.expedition-page-section .page-header h1 {
  color: #2D496B; /* Couleur de titre sombre (cohérent avec le site) */
  font-size: 2.2rem; /* Taille du titre principal de la page */
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.expedition-page-section .page-header p {
  font-size: 1.1rem; /* Taille de la description */
  color: #555;
  max-width: 750px; /* Limiter la largeur pour lisibilité */
  margin: 0.5rem auto 0 auto; /* Centrer la description */
  line-height: 1.7;
}

/* --- Section Instructions --- */
.expedition-instructions {
  background-color: #f8f9fa; /* Fond clair pour distinguer */
  padding: 2rem 2.5rem; /* Plus de padding interne */
  border-radius: 8px;
  margin-bottom: 3rem; /* Espace avant le séparateur */
  border: 1px solid #e9ecef;
}

.expedition-instructions h2 {
  color: #4A7C85; /* Couleur principale du site */
  font-size: 1.6rem; /* Titre de section un peu plus grand */
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.expedition-instructions h2 i.fas {
  margin-right: 0.8rem;
  font-size: 1.1em; /* Taille de l'icône relative au h2 */
}

.steps-list {
  list-style-type: none;
  padding-left: 0;
  counter-reset: step-counter;
}

.steps-list > li {
  margin-bottom: 1.3rem;
  position: relative;
  padding-left: 3rem; /* Plus d'espace pour le numéro */
  font-size: 1rem;   /* Texte des étapes un peu plus grand */
  line-height: 1.65;
  color: #333;
}
.steps-list > li:last-child {
  margin-bottom: 0;
}

.steps-list > li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0.1em; /* Ajustement vertical du numéro */
  background-color: #4A7C85;
  color: white;
  width: 2rem;  /* Numéro un peu plus grand */
  height: 2rem; /* Numéro un peu plus grand */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
}

.steps-list strong {
  color: #222; /* Mettre en évidence les titres d'étapes */
}

.steps-list ul {
  list-style-type: disc;
  margin-top: 0.6rem;
  margin-left: 1.5rem; /* Indentation pour les sous-listes */
  padding-left: 0.8rem;
}

.steps-list ul li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem; /* Sous-points un peu plus petits */
  color: #444;
}

.shipping-address {
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background-color: #e9f5f9; /* Bleu très clair */
  border: 1px solid #cce0e7;
  border-left: 4px solid #4A7C85; /* Bordure gauche accentuée */
  border-radius: 5px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.shipping-address strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #2D496B;
}

.important-note {
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background-color: #fff3cd; /* Jaune d'alerte */
  border: 1px solid #ffeeba;
  border-left: 4px solid #ffc107; /* Bordure gauche accentuée */
  color: #856404;
  border-radius: 5px;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  line-height: 1.7;
}

.important-note i.fas {
  margin-right: 0.8rem;
  font-size: 1.2em; /* Icône un peu plus grande */
  margin-top: 0.15em; /* Meilleur alignement vertical */
  color: #ffc107;
}

/* --- Séparateur --- */
.section-divider {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); /* Dégradé subtil */
  margin: 3.5rem 0; /* Plus d'espace autour du séparateur */
}

/* --- Conteneur du Formulaire --- */
.expedition-form-container {
  background-color: #ffffff;
  padding: 2.5rem; /* Plus de padding interne */
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.07); /* Ombre plus douce et diffuse */
  border: 1px solid #e0e0e0;
}

.expedition-form-container h2 {
  color: #4A7C85;
  font-size: 1.6rem;
  margin-bottom: 2.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.expedition-form-container h2 i.fas {
  margin-right: 0.8rem;
  font-size: 1.1em;
}

/* --- Styles du Formulaire --- */
#expeditionForm fieldset {
  border: 1px solid #dcdcdc; /* Bordure de fieldset plus claire */
  padding: 2rem 1.8rem;     /* Padding interne de fieldset */
  margin-bottom: 2.5rem;
  border-radius: 6px;
}
#expeditionForm fieldset:last-of-type {
    margin-bottom: 2rem; /* Moins de marge pour le dernier fieldset avant les CGV */
}


#expeditionForm legend {
  font-weight: 600;
  color: #2D496B; /* Couleur plus foncée pour les légendes */
  padding: 0 0.75em; /* Plus de padding horizontal pour la légende */
  font-size: 1.2rem; /* Légendes plus grandes */
  width: auto;
  border-bottom: 2px solid #4A7C85; /* Petit soulignement pour la légende */
  margin-bottom: 1.5rem; /* Espace après la légende */
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem; /* Espace entre les champs sur la même ligne */
  margin-bottom: 1.8rem;
}
.form-row:last-child {
  margin-bottom: 0;
}

.form-group {
  flex: 1 1 calc(50% - 0.9rem); /* (gap / 2) */
  min-width: 240px;
}
.form-group.full-width {
  flex-basis: 100% !important; /* Pour s'assurer qu'il prend toute la largeur */
  min-width: 100%;
}

#expeditionForm label {
  display: block;
  font-weight: 500;
  color: #333; /* Labels plus foncés */
  margin-bottom: 0.5rem;
  font-size: 0.95rem; /* Labels un peu plus grands */
}

#expeditionForm .form-control {
  width: 100%;
  padding: 0.8rem 1rem; /* Padding des champs */
  font-size: 1rem;      /* Taille de police dans les champs */
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 4px; /* Rayon de bordure un peu plus grand */
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#expeditionForm .form-control::placeholder { /* Style pour les placeholders */
    color: #999;
    opacity: 1;
}

#expeditionForm .form-control:focus {
  border-color: #4A7C85;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(74, 124, 133, 0.25); /* Ombre de focus avec la couleur principale */
}

#expeditionForm textarea.form-control {
  min-height: 120px; /* Hauteur minimale pour textarea */
  resize: vertical;
}

#expeditionForm input[type="checkbox"] {
  width: auto;
  margin-right: 0.6em; /* Plus d'espace à droite de la checkbox */
  vertical-align: -2px; /* Meilleur alignement vertical avec le texte */
  transform: scale(1.1); /* Checkbox légèrement plus grande */
}

#expeditionForm .checkbox-label {
  font-weight: normal;
  font-size: 0.95rem;
  margin-left: 0; /* Pas besoin de marge gauche si le input a une marge droite */
  color: #495057;
  cursor: pointer; /* Indiquer que le label est cliquable */
}

#expeditionForm .checkbox-label a {
  color: #007bff; /* Couleur de lien standard (bleu) */
  text-decoration: underline;
}
#expeditionForm .checkbox-label a:hover {
  color: #0056b3;
}

.btn-submit-expedition {
  font-size: 1.1rem; /* Bouton de soumission plus grand */
  padding: 0.85rem 2.2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* Les styles de .btn et .btn-primary de votre style.css global devraient s'appliquer */
}

/* --- Messages de statut du formulaire --- */
.form-message {
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid transparent;
  border-radius: 6px; /* Coins arrondis cohérents */
  font-size: 0.95rem;
  text-align: left; /* Messages alignés à gauche */
}
.form-message.success {
  color: #0f5132; /* Vert plus foncé pour le texte */
  background-color: #d1e7dd; /* Fond vert pastel */
  border-color: #badbcc;
}
.form-message.error {
  color: #842029; /* Rouge plus foncé pour le texte */
  background-color: #f8d7da; /* Fond rose pastel */
  border-color: #f5c2c7;
}


/* --- Responsive pour le formulaire --- */
@media (max-width: 768px) {
  .expedition-page-section .page-header h1 {
    font-size: 1.8rem;
  }
  .expedition-page-section .page-header p {
    font-size: 1rem;
  }
  .expedition-instructions,
  .expedition-form-container {
    padding: 1.5rem;
  }
  .expedition-instructions h2,
  .expedition-form-container h2 {
    font-size: 1.4rem;
  }
  .steps-list > li {
    font-size: 0.9rem;
    padding-left: 2.8rem;
  }
  .steps-list > li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0; /* La marge sera sur les .form-group eux-mêmes */
  }
  .form-group {
    flex-basis: 100%;
    min-width: auto; /* Pas de min-width quand empilé */
    margin-bottom: 1.5rem; /* Espace entre les champs empilés */
  }
  #expeditionForm fieldset:last-of-type .form-group:last-child, /* Dernier form-group du dernier fieldset */
  #expeditionForm > .form-group:last-of-type { /* Le form-group des CGV */
    margin-bottom: 2rem; /* Plus d'espace avant le bouton submit */
  }
}

@media (max-width: 576px) {
    .expedition-page-section .page-header h1 {
        font-size: 1.6rem;
    }
    .expedition-instructions h2,
    .expedition-form-container h2 {
        font-size: 1.3rem;
    }
    #expeditionForm legend {
        font-size: 1.1rem;
    }
    #expeditionForm .form-control {
        font-size: 0.9rem;
        padding: 0.7rem 0.9rem;
    }
    .btn-submit-expedition {
        font-size: 1rem;
        padding: 0.75rem 1.8rem;
    }
}

/* ==========================================================================
   PAGE : VALIDATION EXPÉDITION (expedition_validation.php)
   ========================================================================== */

.validation-page-section {
  padding: 3rem 0; /* Espace vertical */
}

.validation-message {
  padding: 2rem 2.5rem;
  border-radius: 8px;
  margin: 1rem auto; /* Centrer horizontalement */
  max-width: 750px; /* Limiter la largeur pour une meilleure lisibilité */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombre douce */
  /* text-align: center; Déjà géré par la classe .text-center ajoutée en HTML */
}

.validation-message h1 {
  font-size: 1.9rem; /* Taille du titre un peu plus grande */
  margin-bottom: 1.2rem;
  font-weight: 600;
  display: flex; /* Pour aligner icône et texte */
  align-items: center;
  justify-content: center; /* Centrer le contenu du h1 (icône + texte) */
}
.validation-message h1 i.fas {
  margin-right: 0.8rem;
  font-size: 1.1em; /* Icône légèrement plus grande que le texte du h1 */
  line-height: 1; /* S'assurer que l'icône ne décale pas la ligne */
}

.validation-message p {
  font-size: 1.05rem; /* Texte légèrement plus grand */
  line-height: 1.7;
  margin-bottom: 0.9rem;
  color: #333;
}
.validation-message p:last-of-type {
  margin-bottom: 1.5rem; /* Plus d'espace après le dernier paragraphe avant les boutons/hr */
}


.validation-message strong {
  color: #000; /* Rendre le numéro de ticket bien visible */
  font-weight: bold;
}

/* Styles pour le message de succès */
.validation-message.success {
  background-color: #e6f7f0; /* Vert très pâle */
  border: 1px solid #b3e0c8; /* Bordure verte douce */
  color: #1e4632; /* Texte vert foncé */
}
.validation-message.success h1 {
  color: #10703d; /* Vert plus soutenu pour le titre */
}
.validation-message.success h1 i.fas {
  color: #28a745; /* Icône verte standard */
}

/* Styles pour le message d'erreur (si utilisé sur cette page) */
.validation-message.error {
  background-color: #fdecea; /* Rouge très pâle */
  border: 1px solid #f5c6cb; /* Bordure rouge douce */
  color: #58151c; /* Texte rouge foncé */
}
.validation-message.error h1 {
  color: #8c1c27; /* Rouge plus soutenu pour le titre */
}
.validation-message.error h1 i.fas {
  color: #dc3545; /* Icône rouge standard */
}

.validation-message .btn {
  margin-top: 1rem; /* Espace au-dessus des boutons */
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
}
.validation-message .btn + .btn {
  margin-left: 0.75rem; /* Espace entre les boutons s'il y en a plusieurs */
}
.validation-message .btn i.fas {
  margin-right: 0.5rem;
}

.validation-message hr.my-4 { /* Style pour le séparateur, inspiré de Bootstrap */
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.shipping-address-reminder {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 3px solid #4A7C85; /* Utiliser une couleur de votre thème */
  padding: 1rem 1.5rem;
  border-radius: 5px;
  margin-top: 1.5rem;
  text-align: left; /* Aligner le contenu du bloc adresse à gauche */
}
.shipping-address-reminder h4 {
  font-size: 1.1rem;
  color: #2D496B; /* Utiliser une couleur de votre thème */
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.shipping-address-reminder h4 i.fas {
  margin-right: 0.5rem;
}
.shipping-address-reminder p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
  color: #454545;
}

/* Responsive pour la page de validation */
@media (max-width: 768px) {
  .validation-message h1 {
    font-size: 1.6rem;
  }
  .validation-message p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .validation-page-section {
    padding: 2rem 0;
  }
  .validation-message {
    padding: 1.5rem;
  }
  .validation-message h1 {
    font-size: 1.4rem;
    flex-direction: column; /* Empiler icône et texte */
    text-align: center;
  }
  .validation-message h1 i.fas {
    margin-right: 0;
    margin-bottom: 0.5rem; /* Espace entre icône et texte si empilé */
  }
  .validation-message .btn {
    display: block; /* Boutons pleine largeur */
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .validation-message .btn + .btn {
    margin-left: 0;
  }
}