/* Menage de confiance - formulaire de devis */
#mdc-devis{
  --mdc-paper:#ffffff;
  --mdc-shade:#f5f6f8;
  --mdc-ink:#17191c;
  --mdc-muted:#6a6f77;
  --mdc-line:#dcdee2;
  --mdc-brand:#ff6602;
  --mdc-brand-deep:#e65c00;
  --mdc-brand-tint:#fff2e8;
  --mdc-focus:#1a63d8;
  --mdc-radius:14px;
  --mdc-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --mdc-body:"Poppins","Helvetica Neue",Arial,sans-serif;
}
#mdc-devis *{box-sizing:border-box}
#mdc-devis{
  margin:0; background:var(--mdc-paper); color:var(--mdc-ink);
  font-family:var(--mdc-body); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
#mdc-devis .wrap{max-width:1120px;margin:0 auto;padding:4px 0 110px}


#mdc-devis h1{
  font-family:var(--mdc-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(26px,3vw,32px);line-height:1.08;margin:0 0 12px;max-width:18ch;
  color:var(--mdc-brand);
}
#mdc-devis .contact h2.titre-etapes, #mdc-devis h2.titre-etapes{
  font-family:var(--mdc-display);font-weight:600;font-size:20px;color:var(--mdc-brand);
  letter-spacing:-.01em;margin:48px 0 28px;
}
#mdc-devis .steps{
  list-style:none;display:grid;grid-template-columns:1fr;gap:20px;
  margin:0 0 20px;padding:0;
}
@media(min-width:620px){
  #mdc-devis .steps{grid-template-columns:1fr 1fr;gap:30px}
}
#mdc-devis .steps li{position:relative;padding-top:2px}
#mdc-devis .steps .num{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--mdc-brand);color:#fff;
  font-family:var(--mdc-display);font-weight:700;font-size:14px;line-height:1;
  margin-bottom:11px;
}
/* trait de liaison entre les deux étapes */
@media(min-width:620px){
  #mdc-devis .steps li:first-child .num::after{
    content:"";position:absolute;left:44px;top:17px;height:1px;
    width:calc(100% - 44px + 30px);background:var(--mdc-brand);opacity:.45;
  }
}
#mdc-devis .steps h3{
  font-family:var(--mdc-display);font-weight:600;font-size:14px;letter-spacing:0;
  margin:0 0 5px;color:var(--mdc-ink);
}
#mdc-devis .steps p{margin:0;font-size:14px;line-height:1.6;color:#4c5158;max-width:42ch}
#mdc-devis .req{margin:0 0 4px;font-size:14px;color:var(--mdc-muted)}
#mdc-devis .req b{color:var(--mdc-brand)}

#mdc-devis .layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:960px){
  #mdc-devis .layout{grid-template-columns:minmax(0,1fr) 350px;gap:40px;align-items:start}
}

#mdc-devis section.block{padding:26px 0;border-top:1px solid var(--mdc-line)}
#mdc-devis section.block:first-of-type{border-top:1px solid var(--mdc-line);padding-top:26px;margin-top:4px}
#mdc-devis section.block > h2{
  font-family:var(--mdc-display);font-weight:700;font-size:14px;letter-spacing:-.015em;margin:0 0 3px;
  color:var(--mdc-brand);
}
#mdc-devis section.block > .hint{margin:0 0 20px;font-size:14px;color:var(--mdc-muted);max-width:52ch}

#mdc-devis .field{margin-bottom:14px}
@media(min-width:700px){
  #mdc-devis .field{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:16px;align-items:start}
  #mdc-devis .field > .q{grid-column:1;margin:9px 0 0}
  #mdc-devis .field > *:not(.q){grid-column:2;justify-self:start}
  #mdc-devis .field > .aide{justify-self:stretch}
}
#mdc-devis .field:last-child{margin-bottom:0}
#mdc-devis .field > .q{display:block;font-weight:600;font-size:14px;margin-bottom:8px;line-height:1.35}
#mdc-devis .field > .q em{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--mdc-muted);margin-top:2px}

#mdc-devis .chips{display:flex;flex-wrap:wrap;gap:8px}
#mdc-devis .chips input{position:absolute;opacity:0;width:1px;height:1px}
#mdc-devis .chips label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:400;
  border:1px solid var(--mdc-line);border-radius:999px;padding:6px 13px;
  font-size:14px;background:var(--mdc-paper);transition:border-color .12s,background .12s,color .12s;
  user-select:none;
}
#mdc-devis .chips label:hover{border-color:var(--mdc-muted)}
#mdc-devis .chips input:checked + label{
  border-color:var(--mdc-brand);background:var(--mdc-paper);color:var(--mdc-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--mdc-brand);
}
#mdc-devis .chips input:focus-visible + label{outline:2px solid var(--mdc-focus);outline-offset:2px}

/* --- encadré coordonnées, compact --- */
#mdc-devis .contact{position:sticky;top:20px}
#mdc-devis .contact .card{
  border:1px solid var(--mdc-line);border-top:4px solid var(--mdc-brand);
  border-radius:var(--mdc-radius);background:var(--mdc-paper);padding:18px 18px 20px;
  box-shadow:0 1px 2px rgba(23,25,28,.05),0 8px 24px -18px rgba(23,25,28,.35);
}
#mdc-devis .contact h2:not(.titre-etapes){font-family:var(--mdc-display);font-weight:600;font-size:14px;letter-spacing:0;margin:0 0 2px;color:var(--mdc-brand)}
#mdc-devis .contact .hint{margin:0 0 12px;font-size:14px;color:var(--mdc-muted);line-height:1.4}
#mdc-devis .contact .civ{margin-bottom:11px;gap:6px}
#mdc-devis .contact .civ label{padding:5px 13px;font-size:14px}
#mdc-devis .contact .civ input:checked + label{box-shadow:inset 0 0 0 1px var(--mdc-brand)}

#mdc-devis .fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#mdc-devis .fields .span{grid-column:1/-1}
#mdc-devis .fields .npa{grid-column:span 1}
#mdc-devis label.txt{display:block;position:relative}
#mdc-devis label.txt span{
  display:block;font-weight:500;font-size:14px;color:var(--mdc-muted);
  margin:0 0 2px 2px;
}
#mdc-devis label.txt span b{color:var(--mdc-brand)}
/* Tous les champs de saisie rendent le texte à l'identique, quoi qu'injecte
   le navigateur ou une extension de gestion de mots de passe : d'où les
   !important, qui ne portent que sur ce formulaire. */
#mdc-devis input[type=text], #mdc-devis input[type=email], #mdc-devis input[type=tel], #mdc-devis textarea{
  width:100%;
  font-family:var(--mdc-body)!important;font-size:14px!important;font-weight:400!important;
  font-style:normal!important;letter-spacing:normal!important;line-height:1.35;
  color:var(--mdc-ink)!important;-webkit-text-fill-color:var(--mdc-ink)!important;
  background:var(--mdc-paper)!important;background-image:none!important;
  border:1px solid var(--mdc-line)!important;border-radius:8px;padding:7px 10px;
}
#mdc-devis textarea{min-height:58px;resize:vertical;margin-top:9px;line-height:1.45}
/* Chrome remplit ses suggestions en gras sur fond bleu : on neutralise. */
#mdc-devis input[type=text]:-webkit-autofill,
#mdc-devis input[type=email]:-webkit-autofill,
#mdc-devis input[type=tel]:-webkit-autofill,
#mdc-devis input:-webkit-autofill,
#mdc-devis input:-webkit-autofill:hover,
#mdc-devis input:-webkit-autofill:focus,
#mdc-devis input:-webkit-autofill:active,
#mdc-devis textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--mdc-ink)!important;
  -webkit-box-shadow:0 0 0 60px var(--mdc-paper) inset!important;
  box-shadow:0 0 0 60px var(--mdc-paper) inset!important;
  font-family:var(--mdc-body)!important;font-size:14px!important;font-weight:400!important;
  border:1px solid var(--mdc-line)!important;
  caret-color:var(--mdc-ink);
  transition:background-color 100000s ease-in-out 0s;
}
#mdc-devis input[type=text]:autofill,
#mdc-devis input[type=email]:autofill,
#mdc-devis input[type=tel]:autofill,
#mdc-devis textarea:autofill{
  font-family:var(--mdc-body)!important;font-size:14px!important;font-weight:400!important;
  background:var(--mdc-paper)!important;color:var(--mdc-ink)!important;
  border:1px solid var(--mdc-line)!important;
}
#mdc-devis input:focus, #mdc-devis textarea:focus{outline:none;border-color:var(--mdc-brand)!important;box-shadow:0 0 0 3px var(--mdc-brand-tint)}
#mdc-devis input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--mdc-paper) inset,0 0 0 3px var(--mdc-brand-tint)!important;
  box-shadow:0 0 0 60px var(--mdc-paper) inset,0 0 0 3px var(--mdc-brand-tint)!important;
  border-color:var(--mdc-brand)!important;
}
#mdc-devis input:focus-visible, #mdc-devis textarea:focus-visible{outline:2px solid var(--mdc-focus);outline-offset:1px}

#mdc-devis .morelink{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--mdc-brand);
  font:500 14px/1 var(--mdc-body);text-decoration:underline;text-underline-offset:3px;
}
#mdc-devis .morelink:focus-visible{outline:2px solid var(--mdc-focus);outline-offset:3px}
#mdc-devis #remarque[hidden]{display:none}

#mdc-devis .btn{
  display:block;width:100%;margin-top:14px;cursor:pointer;
  font:600 14px/1 var(--mdc-body);color:#fff;background:var(--mdc-brand);
  border:0;border-radius:10px;padding:14px 18px;
}
#mdc-devis .btn:hover{background:var(--mdc-brand-deep)}
#mdc-devis .btn:focus-visible{outline:2px solid var(--mdc-focus);outline-offset:2px}
#mdc-devis .reassure{margin:11px 0 0;font-size:14px;color:var(--mdc-muted);line-height:1.4;display:flex;gap:7px;align-items:flex-start}
#mdc-devis .reassure svg{flex:none;margin-top:2px}
#mdc-devis .small{font-size:14px;color:var(--mdc-muted);margin:9px 0 0;line-height:1.45}

#mdc-devis .mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:var(--mdc-paper);border-top:1px solid var(--mdc-line);
}
#mdc-devis .mobilebar .btn{margin:0}
@media(max-width:959px){
  #mdc-devis .mobilebar{display:block}
  #mdc-devis .contact{position:static}
  #mdc-devis .contact .btn{display:none}
}

#mdc-devis.is-sent .layout, #mdc-devis.is-sent .mobilebar, #mdc-devis.is-sent .intro{display:none}
#mdc-devis.is-sent .done{display:block}


/* étapes, colonne de droite */
#mdc-devis .contact .steps{grid-template-columns:1fr;gap:18px;margin:0 2px}
#mdc-devis .contact .steps li{padding-left:44px;min-height:34px}
#mdc-devis .contact .steps .num{position:absolute;left:0;top:0;margin:0;width:32px;height:32px;font-size:14px}
#mdc-devis .contact .steps h3{font-size:14px;margin:5px 0 4px}
#mdc-devis .contact .steps p{font-size:14px;line-height:1.55;max-width:none}
@media(min-width:620px){
  #mdc-devis .contact .steps{grid-template-columns:1fr}
  #mdc-devis .contact .steps li:first-child .num::after{
    content:"";position:absolute;left:15px;top:38px;width:1px;
    height:calc(100% - 38px + 16px);background:var(--mdc-brand);opacity:.35;
  }
}
/* durée estimée — ancienne place, conservée pour mémoire */
#mdc-devis .duree{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--mdc-line);
}
#mdc-devis .duree .lab{font-size:14px;color:var(--mdc-muted)}
#mdc-devis .duree b{
  font-family:var(--mdc-display);font-weight:600;font-size:18px;color:var(--mdc-brand);
  font-variant-numeric:tabular-nums;transition:opacity .15s ease;
}
#mdc-devis .duree b.flash{opacity:.3}

/* remerciement */
#mdc-devis .done{
  display:none;text-align:center;max-width:560px;margin:10px auto 0;
  background:var(--mdc-paper);border:1px solid var(--mdc-line);border-radius:16px;
  padding:44px 32px 40px;box-shadow:0 1px 3px rgba(23,25,28,.08);
}
#mdc-devis .done .rond{
  width:64px;height:64px;border-radius:50%;border:2px solid var(--mdc-brand);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
#mdc-devis .done h2{font-family:var(--mdc-display);font-weight:600;font-size:21px;letter-spacing:0;margin:0 0 10px}
#mdc-devis .done p{margin:0 0 24px;font-size:14px;color:#4c5158;line-height:1.6}
#mdc-devis .done .retour{
  display:inline-block;width:auto;margin:0;padding:14px 26px;
  text-decoration:none;text-align:center;
}

/* durée, dans la carte des coordonnées */
#mdc-devis .duree{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--mdc-line);
}
#mdc-devis .duree .lab{font-size:14px;color:var(--mdc-muted)}
#mdc-devis .duree b{
  font-family:var(--mdc-display);font-weight:600;font-size:18px;color:var(--mdc-brand);
  font-variant-numeric:tabular-nums;transition:opacity .15s ease;
}
#mdc-devis .duree b.flash{opacity:.3}

/* champs manquants */
#mdc-devis .erreur{
  margin:12px 0 0;font-size:14px;line-height:1.45;color:#b3261e;
  background:#fdecea;border:1px solid #f5c6c2;border-radius:9px;padding:10px 12px;
}
#mdc-devis .invalide{border-color:#b3261e !important;background:#fffafa}
#mdc-devis .invalide:focus{outline-color:#b3261e}
#mdc-devis label.txt.manque span{color:#b3261e}

/* consentement */
#mdc-devis .consentement{display:flex;gap:11px;align-items:flex-start;margin:16px 0 4px;cursor:pointer}
#mdc-devis .consentement input{
  flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--mdc-brand);cursor:pointer;
}
#mdc-devis .consentement span{font-size:14px;line-height:1.45;color:#4c5158}
#mdc-devis .consentement a{color:var(--mdc-brand-deep)}
#mdc-devis .consentement.manquant span{color:#b3261e}

/* compteur : moins / valeur / plus */
#mdc-devis .compteur{display:inline-flex;width:max-content;align-items:center;gap:4px;border:1px solid var(--mdc-line);border-radius:999px;padding:4px}
#mdc-devis .compteur[hidden]{display:none}
#mdc-devis .compteur .pas{
  width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--mdc-muted);
  font:400 14px/1 var(--mdc-body);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
#mdc-devis .compteur .pas:hover:not(:disabled){background:var(--mdc-brand-tint);color:var(--mdc-brand-deep)}
#mdc-devis .compteur .pas:disabled{opacity:.35;cursor:default}
#mdc-devis .compteur .pas:focus-visible{outline:2px solid var(--mdc-focus);outline-offset:2px}
#mdc-devis .compteur .valeur{
  min-width:96px;text-align:center;font-family:var(--mdc-display);font-weight:600;font-size:14px;
  color:var(--mdc-brand);font-variant-numeric:tabular-nums;
}

/* bascule estimation / durée choisie */
#mdc-devis .bascule{display:inline-flex;background:var(--mdc-shade);border-radius:999px;padding:4px;margin-bottom:12px;max-width:100%}
#mdc-devis .bascule input{position:absolute;opacity:0;width:1px;height:1px}
#mdc-devis .bascule label{
  border-radius:999px;padding:8px 15px;cursor:pointer;font-size:14px;color:var(--mdc-muted);white-space:nowrap;
  transition:background .12s,color .12s;user-select:none;
}
#mdc-devis .bascule input:checked + label{background:var(--mdc-paper);color:var(--mdc-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--mdc-brand)}
#mdc-devis .bascule input:focus-visible + label{outline:2px solid var(--mdc-focus);outline-offset:2px}
#mdc-devis .choix-duree{display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%}
@media(max-width:520px){
  #mdc-devis .bascule{flex-direction:column;border-radius:16px;align-items:stretch}
  #mdc-devis .bascule label{text-align:center}
}

#mdc-devis .deroulante{
  width:100%;max-width:280px;font:inherit;color:var(--mdc-ink);background:var(--mdc-paper);
  border:1px solid var(--mdc-line);border-radius:10px;padding:11px 13px;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a6f77' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;
}
#mdc-devis .deroulante:focus{outline:2px solid var(--mdc-focus);outline-offset:1px;border-color:transparent}
#mdc-devis .aide{margin:7px 0 0;color:var(--mdc-muted);max-width:46ch;font-size:14px}

/* téléphone */
@media(max-width:700px){
  #mdc-devis .wrap{padding:16px 22px 120px}
  #mdc-devis .fields{grid-template-columns:1fr;gap:12px}
  #mdc-devis .fields .npa, #mdc-devis .fields .txt{grid-column:1}
  #mdc-devis .contact .card{padding:22px 20px 24px}
  #mdc-devis .mobilebar{padding:14px 22px calc(14px + env(safe-area-inset-bottom))}

  /* zones de contact un peu plus généreuses, sans changer la mise en page */
  #mdc-devis .chips label{padding:9px 16px}
  #mdc-devis .compteur .pas{width:38px;height:38px;font-size:20px}
  #mdc-devis .compteur .valeur{min-width:104px}
  #mdc-devis .bascule label{padding:10px 16px}
  #mdc-devis input[type=text], #mdc-devis input[type=email], #mdc-devis input[type=tel], #mdc-devis textarea{padding:10px 12px}
  #mdc-devis .btn{padding:15px 18px}
  #mdc-devis .consentement input{width:24px;height:24px}
  #mdc-devis section.block{padding:22px 0}
  #mdc-devis .field{margin-bottom:18px}
  #mdc-devis .contact h2.titre-etapes, #mdc-devis h2.titre-etapes{margin:56px 0 30px}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* piège à robots */
#mdc-devis #mdc-website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* --- neutralisation des styles du thème sur les champs ---
   Jevelin impose sa propre hauteur, sa marge et son ombre aux champs de
   formulaire : sans ces règles, les champs sont bien plus hauts que prévu. */
#mdc-devis input[type=text],
#mdc-devis input[type=email],
#mdc-devis input[type=tel],
#mdc-devis textarea,
#mdc-devis select{
  height:auto;min-height:0;max-height:none;line-height:1.35;
  margin:0;box-shadow:none;background-image:none;
}
#mdc-devis input[type=text],
#mdc-devis input[type=email],
#mdc-devis input[type=tel]{height:34px}
#mdc-devis textarea{height:auto;min-height:58px}
#mdc-devis .consentement input[type=checkbox]{height:18px;min-height:0}
#mdc-devis .chips input,
#mdc-devis .bascule input{height:1px;min-height:0}
#mdc-devis label.txt{margin:0}
#mdc-devis .btn{height:auto;line-height:1.3;margin-top:14px}

@media(max-width:700px){
  #mdc-devis input[type=text],
  #mdc-devis input[type=email],
  #mdc-devis input[type=tel]{height:40px}
  #mdc-devis .consentement input[type=checkbox]{height:24px}
}

/* le thème ajoute un fond et une ombre aux boutons : on les retire ici */
#mdc-devis .compteur .pas{
  background:transparent;box-shadow:none;text-shadow:none;border:0;padding:0;
}
#mdc-devis .compteur .pas:hover:not(:disabled){background:var(--mdc-brand-tint)}

/* plus aucun fond ni ombre gris autour des compteurs et de la bascule */
#mdc-devis .bascule{
  background:transparent;border:1px solid var(--mdc-line);padding:3px;box-shadow:none;
}
#mdc-devis .bascule label{background:transparent;box-shadow:none}
#mdc-devis .bascule input:checked + label{
  background:var(--mdc-paper);box-shadow:inset 0 0 0 1px var(--mdc-brand);
}
#mdc-devis .compteur{background:transparent;box-shadow:none}

/* la bascule prend l'apparence des pastilles : deux choix séparés */
#mdc-devis .bascule{
  display:flex;flex-wrap:wrap;gap:7px;background:none;border:0;padding:0;margin-bottom:12px;
}
#mdc-devis .bascule label{
  display:inline-flex;align-items:center;cursor:pointer;font-weight:400;font-size:14px;
  border:1px solid var(--mdc-line);border-radius:999px;padding:6px 13px;
  background:var(--mdc-paper);color:var(--mdc-ink);white-space:nowrap;box-shadow:none;
}
#mdc-devis .bascule label:hover{border-color:var(--mdc-muted)}
#mdc-devis .bascule input:checked + label{
  border-color:var(--mdc-brand);background:var(--mdc-paper);color:var(--mdc-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--mdc-brand);
}
@media(max-width:700px){
  #mdc-devis .bascule label{padding:9px 16px}
}
