/* ==========================================================
   CSS RÉÉCRIT SANS RÉPÉTITIONS
   Objectif: ✅ même rendu (mêmes règles “gagnantes” en bas)
   Méthode: on garde uniquement les règles finales (celles qui
   prennent réellement le dessus), et on conserve l’ordre des
   media queries + les !important.
========================================================== */

/* ===== Header / Logo ===== */
.header-inner{
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header{
  height: 80px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1);
  position: relative;
  z-index: 10;
}

/* ✅ la règle réellement prise en compte chez toi (fin de fichier) */
img.logo{
  position: relative !important;
  left: -70px !important;
  top: 1px !important;
  height: 36.8px !important;
  width: auto;
  display: block;
}

/* Zone bleue */
.blue-zone{
  height: calc(100vh - 80px);
  background: #fff;
}

/* ===== Layout page ===== */
.page{
  background: #fff;
  min-height: calc(100vh - 80px);
  padding: 28px 16px 60px;
}

.wrap{
  max-width: 720px;
  margin: 0 auto;
  transform: scale(0.85);
  transform-origin: top center;
  margin-top: 0.5cm;
}

/* ===== Barre du haut (Étape / retour) ===== */
.stepbar{
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2f5fe6;
  font-weight: 600;
  align-items: center; /* conservé */
}

.steptext{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 110% !important; /* +10% */
}

/* Flèche */
.stepbar .back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #2563eb;
  text-decoration: none;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 0 0 currentColor;
}

.stepbar .back .arrow-icon{
  width: 24px;
  height: 24px;
}

.stepbar .back svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.9;
}

/* Texte step */
.steptext .step{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.steptext .topic{
  font-size: 15px;
  font-weight: 700;
}

/* Separateur */
.topline{
  height: 1px;
  background: #e9edf5;
  margin: 14px 0 26px;
  margin-bottom: 0.8cm !important;
}

/* ===== Titre ===== */
.title{
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 18px;
  margin-bottom: 0.8cm !important;
  margin-top: 0 !important;
}

/* ===== Form ===== */
.form{
  display: grid;
  gap: 12px !important;
}

.field{
  margin-bottom: 10px !important;
}

.field label{
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px !important;
}

.field input,
.field select{
  width: 100%;
  height: 46px !important;
  border-radius: 4px;
  font-size: 15px;
  padding: 0 14px;
  background: #fff;
  outline: none;
  border: 2.2px solid #cfd8e3 !important;
  box-sizing: border-box !important;
}

/* Focus */
.field input:focus,
.field select:focus{
  border: 2.2px solid #1F77D6 !important;
  box-shadow: 0 0 0 3px rgba(31,119,214,0.15);
}

/* Placeholder */
.field input::placeholder{
  color: #9ca3af;
}

/* ===== Bouton bleu (forcé) ===== */
button.cta{
  background: #1F77D6 !important;
  background-color: #1F77D6 !important;
  color: #ffffff !important;
  border: none !important;

  width: 100%;
  height: 50px;           /* issu des réglages finaux mobile */
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  box-sizing: border-box;
  margin-top: 10px !important;
  padding: 0 16px;
}


/* Flèche du bouton */
.cta-arrow{
  display: inline-block;
  margin-left: 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transform: scaleX(1.2);
}

/* Note */
.note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #111827;
  margin-top: 8px !important;
  font-size: 14px;
}

/* ===== Police globale ===== */
html,
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111827;
}

/* =============================== */
/* STEP 4 – ESTIMATION / OPTIONS   */
/* =============================== */
.sub-title{
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.opt-list{
  display: grid;
  gap: 14px;
}

.opt-card{
  background: #ffffff !important;
  border: 1.6px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.06);
}

.opt-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.opt-ico{
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: transparent !important;
  display: grid;
  place-items: center;
  color: #1F77D6;
  flex: 0 0 auto;
}

.opt-ico svg{
  width: 28px;
  height: 28px;
}

.opt-title{
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 6px;
}

.opt-desc{
  color: #6b7280;
  font-size: 14px;
  line-height: 1.35;
}

.opt-right{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.price-pill{
  background: #d79a55;
  color: #fff;
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 74px;
  text-align: center;
  font-size: 18px;
}

/* Toggle switch */
.switch{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  transition: .2s;
  border-radius: 999px;
}
.slider:before{
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 3px;
  background: #fff;
  transition: .2s;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.switch input:checked + .slider{ background: #3b82f6; }
.switch input:checked + .slider:before{ transform: translateX(22px); }

/* Prix (faux bouton) */
.price-display{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1F77D6;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  border-radius: 6px;
  padding: 12px 22px;
  margin: 0 auto 10px;
  width: auto;
  min-width: 140px;
  max-width: 220px;
  pointer-events: none;
  user-select: none;
  text-align: center;
}

/* =============================== */
/* STEP 5 – CONTACT                */
/* =============================== */
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  align-items: start;
}

.field-row .field{
  width: 100%;
  margin-bottom: 0 !important;
}

.field-row .field input{
  width: 100% !important;
  box-sizing: border-box !important;
}

.textarea{
  width: 100%;
  min-height: 110px;
  border-radius: 4px;
  border: 2.2px solid #cfd8e3;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.textarea:focus{
  border: 2.2px solid #1F77D6;
  box-shadow: 0 0 0 3px rgba(31,119,214,0.15);
}

/* =============================== */
/* PAGE MERCI                      */
/* =============================== */
.merci-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  display: flex;
  justify-content: center;
}

.merci-box{
  width: 100%;
  background: #EAF3FC;
  border: 2px solid rgba(31,119,214,0.18);
  border-radius: 4px;
  padding: 28px 24px;
  text-align: center;
  box-sizing: border-box;
}

.merci-title{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
}

.merci-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  font-weight: 500;
}
.merci-text strong{ font-weight: 800; }

.merci-call{
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  font-weight: 600;
}

.merci-call a{
  color: #1F77D6;
  text-decoration: none;
  font-weight: 800;
}
.merci-call a:hover{ text-decoration: underline; }

/* =============================== */
/* DESKTOP UNIQUEMENT – -15%       */
/* =============================== */
@media (min-width: 1024px){
  .wrap{
    max-width: 610px;
  }
}

/* =============================== */
/* MOBILE                          */
/* =============================== */
@media (max-width: 768px){
  header.header{
    height: 83px !important;
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
  }

  header.header > .header-inner{
    height: 70px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* ⚠️ ta règle mobile “gagnante” */
  header.header .header-inner img.logo{
    display: block !important;
    height: 38px !important;
    width: auto !important;
    transform: translate(70px, 5px) !important;
  }

  .blue-zone{
    min-height: calc(100vh - 70px) !important;
    background: #fff !important;
  }

  /* MOBILE – pas de scroll horizontal (tes règles finales) */
  html,
  body{
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip !important;
  }

  .page{
    width: 100%;
    margin: 0 auto;
    padding: 18px 0;
  }

  .wrap{
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 0.25cm !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
    margin-top: 1.5cm;
  }

  .field,
  .field input,
  .field select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* iPhone / date */
  input[type="date"]{
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 10px !important;
    height: 46px !important;
    line-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  input[type="date"]::-webkit-date-and-time-value{
    line-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Options mobile */
  .opt-card{ padding: 14px !important; }
  .opt-title{ font-size: 15px; }
  .opt-desc{ font-size: 13px; }
  .price-pill{ font-size: 16px; min-width: 68px; }

  /* Contact mobile */
  .field-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Remonter le titre (tes réglages finaux) */
  .topline{ margin-bottom: 10px !important; }
}

/* =============================== */
/* Page Merci – centrage vertical desktop */
/* =============================== */
@media (min-width: 769px){
  .page-merci .page{
    min-height: calc(100vh - 80px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-merci .merci-wrap{
    margin: 0 !important;
    padding: 0 16px 0 !important;
    width: 100%;
  }
}
@media (max-width: 768px){
  .field input,
  .field select,
  .textarea{
    font-size: 16px !important;
  }
}






/* =========================================
   FIX MOBILE OPTIONS : garder le style "carte blanche"
   avec le même rendu qu'avant (pas de réduction mobile)
========================================= */
/* =========================================
   OPTIONS (mobile) — retour affichage "avant"
   ✅ carte BLANCHE + layout mobile empilé
   (à coller TOUT EN BAS du CSS)
========================================= */
@media (max-width: 768px){

  /* carte blanche conservée */
  .opt-card{
    background: #ffffff !important;
    border: 1.6px solid #e5e7eb !important;
    border-radius: 6px !important;

    /* layout "avant" (moins centré, plus naturel) */
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  .opt-left{
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ✅ switch + prix empilés (comme souvent sur mobile “avant”) */
  .opt-right{
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
  }

  .opt-title{ font-size: 15px !important; }
  .opt-desc{ font-size: 13px !important; line-height: 1.35 !important; }

  .price-pill{
    font-size: 16px !important;
    min-width: 68px !important;
    padding: 10px 14px !important;
  }
}





/* Décaler légèrement l'image vers la gauche */
.opt-ico img{
  
  transform: translateX(-10px); /* ← décalage gauche */
}







button.cta:hover{
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1F77D6 !important;

  border: 2px solid #1F77D6 !important; /* contour bleu */
}

  width: 100%;
  height: 50px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  box-sizing: border-box;
  margin-top: 10px !important;
  padding: 0 16px;
}


/* Sous-titre Estimation */
.estimation-sub{
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin-top: -10px;
  margin-bottom: 14px;
}



/* Sous-titre Options */
.options-sub{
  text-align: left;
  font-size: 14px;
  color: #6b7280;
  margin-top: -6px;
  margin-bottom: 14px;
}



/* ======================================
   Pastilles prix options (style blanc)
   fond blanc + contour bleu + texte bleu
====================================== */

.price-pill{
  background: #ffffff !important;       /* fond blanc */
  color: #1F77D6 !important;            /* texte bleu foncé */
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 74px;
  text-align: center;
  font-size: 18px;

  border: 2px solid #1F77D6 !important;  /* contour bleu */
}



/* Badge prix principal (vert + texte blanc) */
.price-display{
  background: #ff7f00 !important;   /* vert */
  color: #ffffff !important;        /* texte blanc */
  font-weight: 900;
}


.thanks-text{
  max-width:700px;
  margin:0 auto 28px auto;
  text-align:center;
}

.thanks-text h2{
  color:#1F77D6; /* ton bleu */
  font-size:22px;
  margin-bottom:10px;
}

.thanks-text p{
  font-size:15px;
  line-height:1.6;
  margin:6px 0;
  color:#334155;
}



.thanks-panel-single{
  max-width:900px;
  margin:0 auto 28px auto;
  background:#f1f5f9; /* même couleur que panel-body */
  border-radius:12px;
  padding:22px 28px;
  text-align:center;
}

.thanks-panel-single h2{
  color:#1F77D6;
  font-size:20px;
  margin-bottom:10px;
}

.thanks-panel-single p{
  font-size:15px;
  line-height:1.6;
  margin:6px 0;
  color:#334155;
}


.logout-btn{
  background:#ef4444;
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
}
.logout-btn:hover{
  background:#dc2626;
}







/* Anti pull-to-refresh (mobile) */
html, body { 
  height: 100%; 
}




html, body {
  overscroll-behavior-y: contain;
}





/* Ajustement largeur formulaire uniquement sur téléphone */
@media (max-width: 600px) {
  .wrap {
    max-width: 380px;   /* ou 400px si tu veux un peu plus large */
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* sécurité anti scroll horizontal */
  body {
    overflow-x: hidden;
  }

  input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}




@media (max-width: 600px) {
  main.page > section.wrap,
  .page .wrap,
  section.wrap {
    padding-left: 15px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* sécurité : les champs ne débordent jamais */
  .wrap input,
  .wrap select,
  .wrap textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}







/* Forcer la couleur du texte des dates en noir */
input[type="date"] {
  color: #000 !important;
}

/* iOS Safari (spécifique) */
input[type="date"]::-webkit-datetime-edit {
  color: #000 !important;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #000 !important;
}





@media (max-width: 600px) {
  #obj-suggest button,
  #obj-suggest button * {
    color: #000 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 600px) {
  #obj-list div[data-id] > div:first-child,
  #obj-list [data-id] div:first-child {
    color: #000 !important;
    font-size: 14px !important;   /* ajuste : 13px si tu veux encore plus petit */
    font-weight: 600 !important; /* un peu moins gras */
  }
}


@media (max-width: 600px) {
  /* Case quantité (le rectangle gris) */
  #obj-list [data-id] div[style*="border"] {
    width: 52px !important;   /* avant ~70px */
    height: 32px !important;  /* avant ~40px */
    padding: 0 !important;
    font-size: 15px !important; /* chiffre reste lisible */
  }
}
@media (max-width: 600px) {
  /* Espace sous le champ de recherche */
  #obj-search {
    margin-bottom: 20px;
  }
}
#obj-list button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 600px) {
  /* Bouton prix des options (le pill bleu) */
  .opt-card .price-pill {
    min-width: 50px !important;   /* avant ~90-100px */
    padding: 6px 10px !important; /* avant plus large */
    font-size: 14px !important;   /* un peu plus petit */
    border-radius: 10px !important;
  }
}


@media (max-width: 600px) {
  /* Forcer le texte des selects en noir (iOS inclus) */
  select,
  select:focus,
  select:active {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important; /* iOS */
  }

  option {
    color: #000 !important;
  }
}