/***** 1) Thème / variables *****/
:root {
  --pmv-primary-color:#1846b6;
  --pmv-secondary-color:#435baa;
  --pmv-detail-color:red;
  --pmv-text-color:black;
  --pmv-second-text-color:white;
  --pmv-background-color:#fff;
  --pmv-border-color:#ccc;
  --pmv-text-grey:grey;
}

/***** 2) Conteneurs principaux *****/
#pmv_container {
  width:100%;
  max-width:750px;
  margin:0 auto;
  padding:1rem;
  font-family:Arial, sans-serif !important;
  font-size:1rem !important;
  position:relative;
  background-color:var(--pmv-second-text-color);
  border-radius:10px;
  color:  var(--pmv-text-color); !important; /* (note: !important après le ;) */
}
#pmv_container .pmv-equipments-container { gap:0; }
#pmv_part_1 { margin:0 0.5rem; }

#move-form-travel {
  background-color:var(--pmv-background-color);
  border:1px solid var(--pmv-border-color);
  border-radius:8px;
  padding:1.4rem 2rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/***** 3) Liens *****/
#move-form-travel a {
  color:var(--pmv-secondary-color);
  text-decoration:underline;
  cursor:pointer;
  transition:color 0.3s ease, transform 0.3s ease;
}
#move-form-travel a:hover { transform:translateY(-1px); }

/***** 4) Typo / labels / utilitaires texte *****/
.pmv-small-label { color:var(--pmv-text-color); font-size:15px; }
.pmv-font-600 { font-weight:600; }
.pmv-italic { font-style:italic; }
.pmv-form-label { font-weight:bold; margin-bottom:0.6rem; display:block; color:var(--pmv-text-color); }
.pmv-big-fs { font-size:1.2rem !important; }
.pmv-title-fs { font-size:1.2rem !important; font-weight:bold; margin-bottom:1.5rem; color:var(--pmv-text-color); }
.pmv-text { color:var(--pmv-text-color); margin:0 0 0.6rem; font-size:1rem !important; }
.pmv-fs { font-size:13px; }
.pmv-margin-0 { margin:0 !important; }
.pmv-required { font-weight:bold; position:relative; display:inline-block; }
.pmv-required::after {
  content:"*";
  color:var(--pmv-detail-color);
  font-size:1rem;
  position:absolute;
  line-height:1;
  margin-left:4px;
}

/***** 5) Grille / layout *****/
.pmv-row { flex-wrap:wrap; display:flex; margin:0 -10px; position:relative; }
.pmv-col-2, .pmv-col-3, .pmv-col-4, .pmv-col-5, .pmv-col-6, .pmv-col-12 { box-sizing:border-box; }
.pmv-col-1 { flex:0 0 4.33%; max-width:8.33%; padding:15px 0px }
.pmv-col-2 { flex:0 0 16.66%; max-width:16.66%; }
.pmv-col-3 { flex:0 0 25%; max-width:25%; }
.pmv-col-4 { flex:0 0 32.33%; max-width:32.33%; }
.pmv-col-5 { flex:0 0 41.66%; max-width:41.66%; }
.pmv-col-6 { flex:0 0 50%; max-width:50%; }
.pmv-col-12 { flex:0 0 100%; max-width:100%; }

.pmv-flex { display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; align-items:baseline; }
.pmv-align-stretch { align-items:stretch; }
.pmv-flex-right { justify-content:flex-end; }
.pmv-nowrap { flex-wrap:nowrap; }
.pmv-medium-padding { padding:10px; }
.pmv-min-padding { padding:5px; }

.pmv-left-radius { border-top-left-radius:8px; border-bottom-left-radius:8px; }
.pmv-right-radius { border-top-right-radius:8px; border-bottom-right-radius:8px; }

.pmv-hidden { display:none !important; }
.pmv-none { display:none; }

#move-form-travel hr { border:0; border-top:1.5px solid var(--pmv-border-color); }
.pmv-hr { margin-top:1rem; }

/***** 6) Sections de formulaire *****/
.pmv-form-section { margin-bottom:1.3rem; }
.pmv-form-group { margin-bottom:15px; width:100%; }
.pmv-show-pass { margin-bottom:1rem; }
.checkbox-container {
  display:flex;
  align-items: anchor-center; /* (note: valeur non standard) */
  gap:0.3rem;
  margin-top:1.2rem;
}

/***** 7) Champs / inputs *****/
#move-form-travel input[type="text"],
#move-form-travel input[type="number"],
#move-form-travel input[type="time"],
#move-form-travel input[type="date"],
#move-form-travel input[type="email"],
#move-form-travel input[type="tel"],
#move-form-travel select,
#move-form-travel textarea {
  width:100%;
  padding:8px;
  border:1px solid #000;
  box-sizing:border-box;
  height:35px;
  border-radius:5px;
  font-family:Arial, sans-serif;
  font-size:14px;
}
#move-form-travel select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:100%;
  padding-top:0;
  padding-bottom:0;
  padding-left:10px;
  padding-right:40px;
  border:1px solid #000000;
  border-radius:4px;
  cursor:pointer;
  line-height:35px;
  background-image:url(data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2010%205%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%3E%3Cpolyline%20points%3D%270%2C0%205%2C5%2010%2C0%27%20fill%3D%27none%27%20stroke%3D%27%23333%27%20stroke-width%3D%272%27/%3E%3C/svg%3E);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 10px;
}
#move-form-travel input::placeholder,
#move-form-travel textarea::placeholder { font-size:0.83rem; }
#move-form-travel textarea { height:auto; min-height:80px; }

/***** 8) Checkboxes personnalisées *****/
.pmv-checkbox-group{
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
  align-items: anchor-center; /* valeur non standard -> remplace par 'center' si tu veux */
  min-width: 25%;
}

#move-form-travel input[type="checkbox"] { width:auto; cursor:pointer; }
#move-form-travel input[type="checkbox"] + label { margin:0; padding:0; cursor:pointer; }

#move-form-travel .pmv-checkbox { padding-left:23px !important; position:relative; }
#move-form-travel .pmv-checkbox [type="checkbox"] {
  visibility:hidden; width:1px; height:1px; opacity:0; position:absolute; left:7px; top:5px;
}
#move-form-travel .pmv-checkbox label:before {
  content:''; height:16px; width:16px; display:block; border:1px solid #000; border-radius:1px;
  position:absolute; left:0; top:2px; background:#FFF;
}
#move-form-travel .pmv-checkbox input[type="checkbox"]:checked + label:before {
  background:#FFF; content:""; text-align:center; font-size:.9rem;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAvQAAAL0BHVrG+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADdSURBVEiJtdZLCsIwFEDR+1QcuQXB5fjdV/0vRHANgptw6Mg1KAjPSStteA1pkwQyanpuPylUVJWcY5BVzxkQkWG2gIgUwFVExqhq0gkUgJbzkhrf1vAPsMmKqyqp8J2FJwkY+LpxPBLf+/CogIGvzHXl4ikw6YAfQvByLTPgCdxDIg7+9uFV4FY7wRsBjg6+DLig/x14I8CpK15/B95IX7yxi9oiwNnBF512m/MY3MgrBje/AyPSGzcDRuQNzPvgrYFa5BGDqypS7VVriMhIVb+tCwKGN5BiZP+r+AHmKcauOoh35AAAAABJRU5ErkJggg==) no-repeat center center;
  background-size:12px 17px;
}
/* effet pop */
#move-form-travel .pmv-checkbox input[type="checkbox"]+ label:after {
  content:'';
  display:block;
  height:40px; width:40px; border-radius:50%;
  transform-origin:center;
  background:#00000040;
  left:-15px; top:-10px; position:absolute;
  opacity:0; transform:scale(0);
}
#move-form-travel .pmv-checkbox input[type="checkbox"]:checked+ label:after {
  animation-name:move-form-pop;
  animation-duration:0.4s;
}
@keyframes move-form-pop {
  0% { transform:scale(0); opacity:1; }
  100% { transform:scale(1.2); opacity:0; }
}

/***** 9) Radios personnalisées *****/
#move-form-travel input[type="radio"] { width:auto; cursor:pointer; }
#move-form-travel input[type="radio"] + label { margin:0; padding:0; cursor:pointer; }

#move-form-travel .pmv-radio { padding-left:23px !important; position:relative; }
#move-form-travel .pmv-radio [type="radio"] {
  width:1px !important; height:1px !important; opacity:0 !important;
  position:absolute; left:6px; top:50%;
}
#move-form-travel .pmv-radio label:before {
  content:''; height:12px; width:12px; display:block; border:1px solid #000; border-radius:50%;
  position:absolute; left:0; top:4px; background:#FFF; border:2px solid #FFF; box-shadow:0 0 0px 2px #000;
}
#move-form-travel .pmv-radio input[type="radio"]:checked + label:before {
  background:#000; content:""; text-align:center; font-size:1.2rem;
}

/***** 10) Tooltips *****/
.pmv-tooltip-container { position:relative; }
#move-form-travel [for="pmv_cgu"] { position:initial !important; }
.pmv-tooltip-text {
  visibility:hidden; width:max-content; text-align:center; padding:6px 8px; border-radius:4px;
  position:absolute; z-index:1; bottom:125%; left:50%; transform:translateX(-50%);
  opacity:0; transition:opacity 0.3s ease;
  background-color:var(--pmv-background-color);
  border:1px solid  var(--pmv-text-color);
}
.pmv-tooltip-container:hover .pmv-tooltip-text { visibility:visible; opacity:1; }

/***** 11) Stepper / progression *****/
.pmv-stepper-wrapper {
  display:flex; justify-content:space-between;
  margin:30px auto; max-width:750px; position:relative;
}
.pmv-stepper-item {
  display:flex; flex-direction:column; align-items:center; position:relative; cursor:pointer;
  text-align:center; flex:1; transition:transform 0.4s ease;
}
.pmv-stepper-item::before {
  content:"";
  position:absolute; top:17.5px; left:-50%;
  width:100%; height:1.7px; background-color:var(--pmv-border-color);
  z-index:0; transition:background-color 0.4s ease;
}
.pmv-stepper-item:first-child::before { display:none; }
.pmv-stepper-item.pmv-active::before { background-color:var(--pmv-primary-color); }

.pmv-step-counter {
  width:36px; height:36px; border-radius:50%;
  background-color:var(--pmv-second-text-color);
  border:1.7px solid var(--pmv-border-color);
  display:flex; align-items:center; justify-content:center;
  z-index:1; font-weight:bold; color:  var(--pmv-text-color);
  transition:all 0.5s ease-in-out;
}
.pmv-step-counter:hover {
  border-color:var(--pmv-primary-color); color:var(--pmv-primary-color);
  box-shadow:0 0 0 6px rgba(0, 123, 255, 0.15);
  transform:scale(1.08);
}
.pmv-stepper-item.pmv-active .pmv-step-counter {
  background-color:var(--pmv-primary-color);
  color:var(--pmv-second-text-color);
  border-color:var(--pmv-primary-color);
}
.pmv-step-name { margin-top:8px; font-size:14px; color:  var(--pmv-text-color); transition:color 0.5s ease; }
.pmv-locked .pmv-step-name { opacity:0.4; }
.pmv-locked .pmv-step-counter { color:#666; pointer-events:none; }

/***** 12) Choix type de trajet (onglets) *****/
.pmv-traval-type-container2 { /* (note: "traval" orthographe) */
  display:flex; margin:1rem 0; max-width:100%; white-space:nowrap;
}
.pmv-travel-type2 {
  padding:0.5rem 0.7rem;
  position:relative; overflow:hidden; cursor:pointer; font-size:14px;
  border:1px solid var(--pmv-primary-color);
  padding:8px 12px; /* défini deux fois */
  text-align:center; transition:all 0.3s;
}
.pmv-travel-type2::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:0;
  background-color:var(--pmv-primary-color); transition:height 0.3s ease-in-out; z-index:1;
}
.pmv-selected-travel2 { color:var(--pmv-primary-color); border-bottom:3px solid var(--pmv-primary-color); }
.pmv-selected-travel2, .pmv-travel-type2:hover {
  color:#ffffff; background:var(--pmv-primary-color); border-bottom:1px solid var(--pmv-primary-color);
}
#pmv_travel_type_two2 { border-left:0; border-right:0; }
#pmv_travel_type_two { border-right:none; border-left:none; }
#pmv_travel_ex { color:var(--pmv-text-grey); font-size:0.8rem; font-style:italic; }
.pmv-selected-travel { background-color:var(--pmv-primary-color); color:var(--pmv-second-text-color); }

/***** 13) Motifs (tuiles radio) *****/
.pmv-motif-div { width:calc(20% - 0.8rem); position:relative; }
.pmv-motif-item {
  aspect-ratio:1 / 1;
  border:1px solid var(--pmv-border-color);
  border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0.5rem !important; box-sizing:border-box;
  flex:1 1 calc(20% - 1rem); max-width:100%;
  cursor:pointer; color:#000; z-index:10; position:relative;
}
#pmv_container [name="pmv_motif_group"] {
  width:1px !important; height:1px !important; opacity:0 !important;
  position:absolute; left:50%; top:50%; z-index:0;
}
.pmv-motif-item:hover {
  background-color:var(--pmv-primary-color);
  color:var(--pmv-second-text-color);
  border-color:var(--pmv-primary-color);
}
#pmv_container [name="pmv_motif_group"]:checked + .pmv-motif-item {
  background-color:var(--pmv-primary-color);
  color:var(--pmv-second-text-color);
  border-color:var(--pmv-primary-color);
  font-weight:bold;
  box-shadow:0 0 0 4px rgba(0, 123, 255, 0.2);
}

/***** 14) Boutons / actions *****/
.pmv-option-button {
  border:1px solid  var(--pmv-text-color);
  padding:0.5rem 1rem;
  cursor:pointer; text-align:center; white-space:nowrap;
  color:  var(--pmv-text-color);
}
#pmv_container button { padding: 0.8rem 1.6rem; position:relative; }

.pmv-next-but {
  background-color:var(--pmv-primary-color);
  padding:10px; border:none; cursor:pointer; margin-top:14px;
  color:var(--pmv-second-text-color);
  border-radius:5px;
  transition:border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}
.pmv-next-but:hover {
  border-color:var(--pmv-primary-color);
  box-shadow:0 0 0 4px rgba(0, 123, 255, 0.15);
  transform:scale(1.05);
}
.pmv-next-but.pmv-disabled { pointer-events:none; opacity:0.6; }

.pmv-add-step {
  cursor:pointer; margin-bottom:2rem;
  background-color:var(--pmv-primary-color);
  padding:4px; display:flex; justify-content:center;
  font-size:14px; white-space:nowrap; border:none; width:4rem;
  color:var(--pmv-second-text-color);
  transition:border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
  border-radius:10rem; min-width:9rem;
}
.pmv-add-step:hover {
  border-color:var(--pmv-primary-color);
  box-shadow:0 0 0 4px rgba(0, 123, 255, 0.15);
  transform:scale(1.05);
}

/* bouton suppression segment */
.pmv-remove-btn {
  display:flex; position:absolute; border-radius:50%;
  font-weight:bold; cursor:pointer; background:none;
  color:var(--pmv-detail-color);
  height:18px; width:18px; top:9px;
  border:2px solid var(--pmv-detail-color);
  justify-content:center; align-items:center;
  z-index:666; transition:all 0.2s ease-in-out;
  left:-19px; right:inherit;
}
.pmv-remove-btn::before,
.pmv-remove-btn::after {
  content:''; position:absolute; top:50%; left:50%;
  width:9px; height:2px; background-color:var(--pmv-detail-color);
  transform-origin:center;
}
.pmv-remove-btn::before { transform:translate(-50%, -50%) rotate(45deg); }
.pmv-remove-btn::after  { transform:translate(-50%, -50%) rotate(-45deg); }
.pmv-remove-btn:hover { background-color:var(--pmv-detail-color); }
.pmv-remove-btn:hover::after,.pmv-remove-btn:hover::before { background-color:var(--pmv-second-text-color); }

/***** 15) Infos “header” trajet *****/
.pmv-show-travel-title { display:flex; gap:0.2rem;margin-bottom:10px; }
.pmv-show-travel-title .pmv-show-travel-count { margin-top:0; }
.pmv-show-travel-places {
  margin:0; padding:0;
}
.pmv-ai-center { align-items:center; }
.pmv-show-travel-count {
  background-color:var(--pmv-primary-color); color:var(--pmv-second-text-color);
  border-radius:50%; font-weight:bold;
  height:22px; line-height:22px; width:22px; min-width:22px; border:none;
  justify-content:center; align-items:center; display:flex; font-size:12px;
}
.pmv-reut { background-color:green; }
.pmv-normal { background-color:var(--pmv-primary-color); }
.pmv-show-travel-date { margin:0; font-weight:600; font-size:1rem !important;color:var(--pmv-primary-color) }

.pmv-show-reut-info {
    color: var(--pmv-text-grey);
}

/***** 16) Hints dynamiques *****/
.pmv-date-hint { margin-top:4px; display:block; white-space:break-spaces; }

/***** 17) Popups succès / erreur *****/
#pmv-success-popup, #pmv-error-popup {
  top:0; left:0; width:100%; height:100%;
  background:rgba(255, 255, 255, 0.9);
  display:flex; justify-content:center; align-items:center;
  z-index:10;
}
#pmv-error-popup .pmv-next-but { background-color:var(--pmv-detail-color); }
.pmv-popup-content {
  background:var(--pmv-background-color);
  padding:1.5rem 2rem; border-radius:10px;
  box-shadow:0 0 15px rgba(0,0,0,0.2);
  font-size:1rem; font-weight:bold; text-align:center;
}
#pmv_cgu_link { color:var(--pmv-primary-color); }

/***** 18) Autocomplétion / suggestions *****/
.pmv-suggestions-container {
  position:absolute; background-color:var(--pmv-background-color);
  border:1px solid #ddd; border-radius:8px;
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
  z-index:1000; margin-top:4px; width:100%;
  max-height:200px; overflow-y:auto;
  font-family:Arial, sans-serif;
}
.pmv-suggestion-item, .pmv-no-suggestions {
  padding:10px 14px; cursor:pointer; transition:background-color 0.2s ease;
}
.pmv-suggestion-item:hover {
  background-color:var(--pmv-secondary-color);
  color:#FFF;
}

/***** 19) Récapitulatif trajet *****/
.pmv-travel-summary {
  border:1px solid var(--pmv-second-text-color);
  padding:1rem; border-radius:8px;
  background:var(--pmv-second-text-color);
}
.pmv-segment {
  margin-bottom:1rem; padding:0.75rem;
  border:1px solid var(--pmv-second-text-color);
  border-radius:6px;
  background:var(--pmv-second-text-color)
}
.pmv-segment-header { font-weight:bold; margin-bottom:0.5rem; }
.pmv-segment-body p { margin:0.2rem 0; }

p#pmv_travel_ex {
    margin-bottom: 0;
}

/**CHECK error**/
.pmv-init-error {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f3c2c2;
  background: #fff6f6;
  color: #7a1e1e;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.pmv-init-error__content {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pmv-init-error__title { display: block; font-weight: 700; margin-right: .5rem; }
.pmv-init-error__message { display: inline-block; }
.pmv-init-error__actions { width:100%; display: flex; gap: .5rem; flex-wrap: wrap;align-items: baseline; justify-content: space-between;}
.pmv-btn { font: inherit; border: 0; cursor: pointer; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; }
.pmv-btn--primary { background: var(--pmv-primary-color, #1846b6); color: #fff; }
.pmv-btn--link { background: transparent; color: var(--pmv-secondary-color, #435baa); text-decoration: underline; padding: 0; }
.pmv-init-error__actions > div{
  flex: 1 1 0;          /* chaque élément prend une part égale */
  text-align: center;   /* centre le texte/bouton */
}

.pmv-multiple-stages{padding-left:10px;padding-right:10px;}

/***** 20) Responsive *****/
@media (max-width: 772px) {
  .pmv-col-1,
  .pmv-col-2,
  .pmv-col-3,
  .pmv-col-4,
  .pmv-col-5,
  .pmv-col-6 {
    flex:1 1 100%;
    max-width:100%;
    width:100%;
  }
  .pmv-responsive { flex-direction:column; }
  #pmv_part_3 .pmv-flex { gap:0; }
  .pmv-option-button { margin-bottom:0.5rem; }
  #move-form-travel{padding:0;border:none;box-shadow:none}
  .pmv-motif-div{width: calc(33% - 0.8rem);}
  .pmv-checkbox-group{width:50%}
  .pmv-multiple-stages{padding:10px;margin: 0;padding-bottom: 0;}
  #move-form-travel input[type="text"], #move-form-travel input[type="number"], #move-form-travel input[type="time"], #move-form-travel input[type="date"], #move-form-travel input[type="email"], #move-form-travel input[type="tel"], #move-form-travel select, #move-form-travel textarea {
      font-size: 16px;
  }
  .pmv-form-label{
    display:block;
  }
  .pmv-step-name {
    font-size: 12px;
  }
  #pmv_container{padding:10px}
  #pmv_part_1{padding:0;margin:0}
  .pmv-init-error__actions {
    flex-direction: column;   /* passe en colonne */
    align-items: stretch;     /* étire sur la largeur */
  }

  .pmv-init-error__actions > * {
    flex: none;
    width: 100%;              /* chaque bouton/lien occupe toute la largeur */
  }

  .m-order-1{
    order:1;
  }
  .m-order-2{
    order:2;
  }
}
