/* ===========================================================
   Renova Swiss — formulaire de contact rapide (pop-up)
   Fichier commun a toutes les pages : une seule source a modifier.
   Fond blanc, texte noir, rouge reserve aux accents (etiquette, bouton, erreurs).
   =========================================================== */
.cx-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.cx-modal.open{display:flex}
.cx-overlay{position:absolute;inset:0;background:rgba(10,10,12,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.cx-modal.open .cx-overlay{opacity:1}

/* --- la boite : fond blanc, sobre --- */
.cx-box{position:relative;z-index:1;width:100%;max-width:480px;border-radius:24px;padding:32px 30px 26px;
  background:#fff;border:1px solid #ececf0;
  box-shadow:0 40px 100px -30px rgba(10,10,12,.5);
  transform:translateY(22px) scale(.96);opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .3s;
  max-height:92vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#c4c4cc #ededf1}
.cx-modal.open .cx-box{transform:none;opacity:1}
.cx-box::-webkit-scrollbar{width:8px}
.cx-box::-webkit-scrollbar-track{background:#ededf1;border-radius:8px;margin:14px 0}
.cx-box::-webkit-scrollbar-thumb{background:#c4c4cc;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.cx-box::-webkit-scrollbar-thumb:hover{background:#9a9aa2;background-clip:padding-box}

/* indicateur de defilement (mobile : les barres natives sont invisibles) */
.cx-sb{position:sticky;top:0;height:0;z-index:6;pointer-events:none}
.cx-sb.off{display:none}
.cx-sb::before{content:'';position:absolute;right:-20px;top:10px;width:4px;height:var(--cx-piste,0px);border-radius:4px;background:#ededf1}
.cx-sb i{position:absolute;right:-20px;top:var(--cx-top,10px);width:4px;height:var(--cx-h,0px);border-radius:4px;background:#b4b4bd}

.cx-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid #e2e2e6;
  background:#fff;color:#1A1A1A;font-size:19px;cursor:pointer;display:grid;place-items:center;line-height:1;transition:.2s}
.cx-close:hover{background:#1A1A1A;color:#fff;border-color:#1A1A1A}

.cx-head{margin-bottom:20px;padding-right:34px}
.cx-head .cx-tag{color:#CC0000;font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:9px}
.cx-head h3{font-family:'Figtree',sans-serif;font-weight:900;font-size:26px;letter-spacing:-.02em;color:#1A1A1A;margin:0 0 8px;line-height:1.1}
.cx-head p{font-size:14px;color:#4a4a52;line-height:1.5;margin:0}
.cx-head p b{color:#1A1A1A;font-weight:800}

/* --- champs --- */
.cx-form{display:flex;flex-direction:column;gap:12px}
/* apres l'envoi, la confirmation remplace le formulaire (display:flex ci-dessus l'emportait sur [hidden]) */
.cx-form[hidden]{display:none}
.cx-success{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cx-success[hidden]{display:none}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-row-npa{grid-template-columns:96px 1fr}
.cx-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-field label{font-size:12px;font-weight:700;color:#1A1A1A}
.cx-field label span{color:#6f6f78;font-weight:500}
.cx-field input,.cx-field textarea{border:1.5px solid #d7d7dc;border-radius:12px;padding:12px 14px;
  font-family:'Inter',sans-serif;font-size:16px;color:#1A1A1A;background:#fff;outline:none;
  transition:border-color .2s,box-shadow .2s;resize:vertical;width:100%;-webkit-appearance:none;appearance:none}
.cx-field input::placeholder,.cx-field textarea::placeholder{color:#6f6f78}
.cx-field input:focus,.cx-field textarea:focus{border-color:#CC0000;box-shadow:0 0 0 3px rgba(204,0,0,.16)}
.cx-field input.err,.cx-field textarea.err{border-color:#B00000;box-shadow:0 0 0 3px rgba(176,0,0,.14)}

/* --- liste deroulante maison (le menu natif du mobile est illisible) --- */
.cx-sel{position:relative}
.cx-sel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:1.5px solid #d7d7dc;border-radius:12px;padding:12px 14px;background:#fff;
  font-family:'Inter',sans-serif;font-size:16px;color:#1A1A1A;text-align:left;cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.cx-sel-btn:focus-visible{outline:none;border-color:#CC0000;box-shadow:0 0 0 3px rgba(204,0,0,.16)}
.cx-sel-btn.err{border-color:#B00000;box-shadow:0 0 0 3px rgba(176,0,0,.14)}
.cx-sel-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:#6f6f78;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.cx-sel-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cx-sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-sel-val.is-ph{color:#6f6f78}
.cx-sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;background:#fff;border-radius:14px;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 26px 50px -18px rgba(10,10,12,.35);overflow:hidden;
  max-height:min(52vh,320px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.cx-sel-list[hidden]{display:none}
.cx-sel-opt{display:block;width:100%;text-align:left;border:0;background:#fff;padding:13px 16px;
  font-family:'Inter',sans-serif;font-size:16px;color:#1A1A1A;cursor:pointer;transition:background .15s,color .15s}
.cx-sel-opt+.cx-sel-opt{border-top:1px solid #f0f0f2}
.cx-sel-opt:hover,.cx-sel-opt:focus-visible{background:#fdeaea;color:#CC0000;outline:none}
.cx-sel-opt[aria-selected="true"]{background:#fdeaea;color:#CC0000;font-weight:700}

/* --- envoi --- */
.cx-submit{margin-top:6px;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:9px;
  background:#CC0000;color:#fff;border:0;border-radius:999px;padding:15px 22px;
  font-family:'Inter',sans-serif;font-size:15.5px;font-weight:800;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s}
.cx-submit:hover{background:#B00000;box-shadow:0 14px 30px -16px rgba(176,0,0,.7)}
.cx-submit:active{transform:translateY(1px)}
.cx-submit:disabled{opacity:.7;cursor:progress}
/* pot de miel : hors ecran (pas display:none, que certains robots savent eviter) */
.cx-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* envoi rate : message visible, avec le telephone et l'e-mail en secours */
.cx-envoi-err{margin:2px 0 0;padding:11px 14px;border-radius:12px;background:#fdeaea;border:1px solid #f3c2c2;
  color:#8f0000;font-size:13.5px;line-height:1.45}
.cx-envoi-err[hidden]{display:none}
.cx-envoi-err a{color:#8f0000;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* ===== Champs communs a tous les formulaires (assets/contact-popup.js, window.renovaAmenager) ===== */
/* indicatif du pays pose dans la partie gauche du champ telephone : le champ garde son propre style */
.rv-tel{position:relative;display:block;width:100%}
.rv-tel>input{width:100%;padding-left:80px!important}
/* libelle compact « +41 ▾ » ; la vraie liste (noms de pays en entier) est posee dessus, invisible */
.rv-ind{position:absolute;left:1px;top:1px;bottom:1px;z-index:1;width:70px;display:flex;align-items:center;
  border-right:1px solid #e2e2e6;border-radius:11px 0 0 11px}
.rv-ind-aff{display:flex;align-items:center;gap:5px;padding-left:13px;font-family:'Inter',sans-serif;font-size:15px;
  font-weight:600;color:#1A1A1A;white-space:nowrap;pointer-events:none}
.rv-ind-aff::after{content:'';width:6px;height:6px;margin-top:-3px;border-right:1.6px solid #6f6f78;border-bottom:1.6px solid #6f6f78;transform:rotate(45deg)}
.rv-ind select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;
  font-size:16px;-webkit-appearance:none;appearance:none}
.rv-ind:focus-within{outline:2px solid #CC0000;outline-offset:-2px}
/* message sous un champ : erreur precise, suggestion, localite trouvee */
.rv-aide{margin:6px 0 0;font-size:13px;line-height:1.45;color:#4a4a52;text-align:left}
.rv-aide[hidden]{display:none}
.rv-aide.rv-err{color:#B00000;font-weight:600}
.rv-aide.rv-err::before{content:'! ';font-weight:900}
.rv-aide .rv-ok{color:#1e7a3c;font-weight:700}
.rv-aide .rv-ok::before{content:'\2713  '}
.rv-aide .rv-cant{color:#6f6f78}
.rv-sugg,.rv-loc{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:700;color:#CC0000;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rv-loc{display:inline-block;margin:3px 4px 0 0;padding:4px 10px;border:1px solid #e2e2e6;border-radius:999px;text-decoration:none;color:#1A1A1A;font-weight:600}
.rv-loc.on{border-color:#CC0000;color:#CC0000;background:#fdeaea}
/* fond sombre (estimateur, fenetre de sortie) : aide en clair */
#simulateur .rv-aide,#estimateur .rv-aide{margin-top:6px}

/* meme message pour l'estimateur et le formulaire du bas de page */
.renova-envoi-err{margin:12px 0;padding:11px 14px;border-radius:12px;background:#fdeaea;border:1px solid #f3c2c2;
  color:#8f0000;font-size:14px;line-height:1.45;text-align:left}
.renova-envoi-err[hidden]{display:none}
.renova-envoi-err a{color:#8f0000;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
#simulateur .renova-envoi-err,#estimateur .renova-envoi-err{margin:0 22px 12px}
.cx-legal{font-size:11px;color:#6f6f78;text-align:center;margin:4px 0 0;line-height:1.4}
.cx-legal a{color:#4a4a52;text-decoration:underline;text-underline-offset:2px}

/* --- confirmation --- */
.cx-success{text-align:center;padding:22px 0 8px}
.cx-check{width:64px;height:64px;border-radius:50%;background:#fdeaea;color:#CC0000;font-size:32px;display:grid;place-items:center;margin:0 auto 18px}
.cx-success h3{font-family:'Figtree',sans-serif;font-weight:900;font-size:24px;color:#1A1A1A;margin:0 0 8px}
.cx-success p{font-size:14px;color:#4a4a52;margin:0}
.cx-success p b{color:#1A1A1A}

@media(max-width:520px){
  .cx-modal{padding:14px}
  .cx-box{padding:26px 18px 20px;border-radius:20px}
  .cx-head h3{font-size:22px}
  .cx-row{grid-template-columns:1fr}
  .cx-row-npa{grid-template-columns:92px 1fr}
  .cx-sb::before,.cx-sb i{right:-11px}
}

/* ===== Accessibilite (ajout) ===== */
/* 16 px mini : sinon iOS zoome a la saisie */
.cx-field input,.cx-field textarea,.cx-sel-btn,.cx-sel-opt{font-size:16px}
/* message d'erreur relie au champ (aria-describedby) : texte + pictogramme, pas seulement la couleur */
.cx-err{margin:0;font-size:12.5px;font-weight:700;color:#B00000;display:flex;align-items:center;gap:6px;line-height:1.35}
.cx-err[hidden]{display:none}
.cx-err::before{content:'!';flex:none;width:16px;height:16px;border-radius:50%;background:#B00000;color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center}
.cx-field input[aria-invalid="true"],.cx-field textarea[aria-invalid="true"],.cx-sel-btn[aria-invalid="true"]{border-color:#B00000;border-width:2.5px;box-shadow:0 0 0 3px rgba(176,0,0,.16)}
/* focus clavier bien visible sur fond blanc */
.cx-box :focus-visible{outline:3px solid #1A1A1A;outline-offset:2px}
/* Champs : un seul reperage, le lisere rouge du :focus (le cadre noir par-dessus etait trop lourd
   au simple clic). #CC0000 sur blanc = 5,9:1, bien au-dela des 3:1 demandes (WCAG 1.4.11). */
.cx-field input:focus-visible,.cx-field textarea:focus-visible,.cx-sel-btn:focus-visible{outline:none;border-color:#CC0000;box-shadow:0 0 0 3px rgba(204,0,0,.16)}
.cx-sel-opt:focus-visible{outline:2px solid #CC0000;outline-offset:-2px}
.cx-success:focus{outline:none}
/* croix : cible 44 px */
.cx-close{width:44px;height:44px;top:10px;right:10px}
.cx-head{padding-right:48px}