/* =========================================================
   Demande de devis Rufous — styles scopés sous .rufous-devis
   Repris à l'identique de devis.html / styles.css (Tsingytech)
   ========================================================= */

.rufous-devis{
  --teal:#008dae;--deep:#073f49;--orange:#ff9a00;--pale:#f1f7f8;--sand:#f7f1e8;--ink:#19333a;--muted:#64777b;--white:#fff;--radius:26px;
  display:block;
  font-family:Montserrat,Arial,sans-serif;
  color:var(--ink);
  line-height:1.55;
  background:linear-gradient(180deg,#fff 0,#f2f7f8 100%);
  padding:88px 0 112px;
}
.rufous-devis,.rufous-devis *{box-sizing:border-box}
.rufous-devis a{text-decoration:none;color:inherit}
.rufous-devis .container{width:min(1240px,calc(100% - 80px));margin:0 auto}

/* Layout deux colonnes */
.rufous-devis .quote-layout{display:grid;grid-template-columns:285px minmax(0,850px);gap:65px;justify-content:center;align-items:start}
.rufous-devis .quote-aside{position:sticky;top:108px}
.rufous-devis .quote-aside-inner{background:var(--deep);color:#fff;border-radius:14px 54px 14px 14px;padding:29px 26px}
.rufous-devis .quote-aside-inner>small{font-size:12px;color:#a7d5db;text-transform:uppercase;letter-spacing:.12em}

/* Barre de progression */
.rufous-devis .quote-progress{display:flex;align-items:center;gap:14px;margin:20px 0 25px}
.rufous-devis .quote-progress>i{position:relative;width:48px;height:48px;border:4px solid rgba(255,255,255,.17);border-radius:50%;display:grid;place-items:center;font-style:normal}
.rufous-devis .quote-progress>i:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.rufous-devis .quote-progress strong,.rufous-devis .quote-progress small{display:block}
.rufous-devis .quote-progress strong{font-size:13px}
.rufous-devis .quote-progress strong em{font-style:normal;color:var(--orange)}
.rufous-devis .quote-progress small{font-size:12px;color:#a8cdd2;margin-top:3px}

/* Navigation des étapes */
.rufous-devis .quote-step-nav{border-top:1px solid rgba(255,255,255,.14)}
.rufous-devis .quote-step-nav button{width:100%;display:grid;grid-template-columns:34px 1fr;gap:9px;text-align:left;background:none;color:#a9c7cc;border:0;border-bottom:1px solid rgba(255,255,255,.14);padding:13px 0;font:inherit;font-size:12px;cursor:pointer;transition:.2s}
.rufous-devis .quote-step-nav button b{color:#6e9ca4;font-size:12px}
.rufous-devis .quote-step-nav button.active,.rufous-devis .quote-step-nav button:hover{color:#fff;padding-left:7px}
.rufous-devis .quote-step-nav button.active b{color:var(--orange)}
.rufous-devis .quote-aside-help{margin-top:23px}
.rufous-devis .quote-aside-help strong,.rufous-devis .quote-aside-help a{display:block}
.rufous-devis .quote-aside-help strong{font-size:13px}
.rufous-devis .quote-aside-help a{font-size:12px;color:var(--orange);margin-top:6px}

/* Carte du formulaire */
.rufous-devis .quote-form{background:#fff;border:1px solid #dbe7e9;border-radius:18px 70px 18px 18px;padding:48px 54px;box-shadow:0 22px 50px rgba(0,70,82,.08);min-height:680px}
.rufous-devis .quote-selected-circuit{display:flex;align-items:center;gap:15px;background:var(--sand);border-left:4px solid var(--orange);padding:14px 16px;margin-bottom:28px;border-radius:0 22px 8px 0}
.rufous-devis .quote-selected-circuit[hidden]{display:none}
.rufous-devis .quote-selected-circuit span{font-size:12px;color:var(--muted)}
.rufous-devis .quote-selected-circuit strong{font-size:13px;color:var(--deep);margin-right:auto}
.rufous-devis .quote-selected-circuit button{width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--deep);cursor:pointer}

/* Étapes */
.rufous-devis .quote-step{display:none;border:0;padding:0;margin:0;min-width:0}
.rufous-devis .quote-step.active{display:block;animation:rufousQuoteFade .32s ease}
.rufous-devis .quote-step legend{width:100%;padding:0;margin:0 0 12px}
.rufous-devis .quote-step legend>span{display:block;font-size:12px;color:var(--orange);letter-spacing:.12em}
.rufous-devis .quote-step legend>small{display:block;font-size:12px;color:var(--teal);text-transform:uppercase;letter-spacing:.12em;margin:7px 0}
.rufous-devis .quote-step legend>strong{display:block;font-size:clamp(30px,3vw,42px);line-height:1.15;color:var(--deep)}
.rufous-devis .quote-step>p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 30px}
@keyframes rufousQuoteFade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Sous-titres et grilles de champs */
.rufous-devis .form-subtitle{font-size:13px;font-weight:600;color:var(--deep);padding-bottom:11px;border-bottom:1px solid #dbe7e9;margin:28px 0 17px}
.rufous-devis .number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rufous-devis .number-grid-four{grid-template-columns:repeat(4,1fr)}
.rufous-devis .number-grid label>small{display:block;min-height:18px;margin:3px 0 8px;font-size:10px;font-weight:500;line-height:1.35;color:var(--muted)}

.rufous-devis .form-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rufous-devis .form-choice-grid-small{grid-template-columns:repeat(3,1fr)}
.rufous-devis .form-choice-grid label,.rufous-devis .comfort-choice label,.rufous-devis .inline-choice label{cursor:pointer}
.rufous-devis .form-choice-grid input,.rufous-devis .comfort-choice input,.rufous-devis .inline-choice input{position:absolute;opacity:0;pointer-events:none}
.rufous-devis .form-choice-grid label>span{display:flex;align-items:center;justify-content:center;min-height:56px;padding:11px;border:1px solid #d5e3e5;border-radius:10px 25px 10px 10px;text-align:center;font-size:12px;font-weight:500;color:var(--deep);transition:.2s}
.rufous-devis .form-choice-grid label:hover>span{border-color:var(--orange);transform:translateY(-2px)}
.rufous-devis .form-choice-grid input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 8px 18px rgba(0,141,174,.16)}

.rufous-devis .comfort-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.rufous-devis .comfort-choice label>span{min-height:145px;display:flex;flex-direction:column;padding:19px;border:1px solid #d5e3e5;border-radius:11px 35px 11px 11px;transition:.2s}
.rufous-devis .comfort-choice b{font-size:12px;color:var(--orange);margin-bottom:22px}
.rufous-devis .comfort-choice strong{font-size:14px;color:var(--deep);margin-bottom:7px}
.rufous-devis .comfort-choice small{font-size:12px;line-height:1.5;color:var(--muted)}
.rufous-devis .comfort-choice input:checked+span{background:var(--deep);border-color:var(--deep)}
.rufous-devis .comfort-choice input:checked+span strong{color:#fff}
.rufous-devis .comfort-choice input:checked+span small{color:#bfd6da}

.rufous-devis .inline-choice{display:flex;gap:10px}
.rufous-devis .inline-choice label>span{display:block;padding:12px 17px;border:1px solid #d5e3e5;border-radius:999px;font-size:12px;font-weight:500}
.rufous-devis .inline-choice input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff}

/* Actions / navigation bas de formulaire */
.rufous-devis .quote-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #dbe7e9;padding-top:24px;margin-top:34px}

/* Récapitulatif (étape 6) */
.rufous-devis .quote-review{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.rufous-devis .quote-review>div{padding:18px;background:var(--pale);border-radius:9px 27px 9px 9px}
.rufous-devis .quote-review span,.rufous-devis .quote-review strong{display:block}
.rufous-devis .quote-review span{font-size:12px;color:var(--teal);text-transform:uppercase;letter-spacing:.08em}
.rufous-devis .quote-review strong{font-size:13px;line-height:1.5;color:var(--deep);margin-top:7px}
.rufous-devis .quote-privacy{font-size:12px;margin:14px 0}

/* Champs de formulaire (label/input/textarea/select) */
.rufous-devis .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.rufous-devis .form-row-three{grid-template-columns:1fr 1fr 1fr}
.rufous-devis .form-consent{display:flex;align-items:flex-start;gap:11px;font-weight:400;line-height:1.55;color:var(--muted);margin:20px 0}
.rufous-devis .form-consent input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--teal)}
.rufous-devis .form-consent>span{color:var(--muted)}
.rufous-devis label{display:block;font-size:12px;font-weight:600;color:var(--deep)}
.rufous-devis label>span{color:var(--orange)}
.rufous-devis input,.rufous-devis select,.rufous-devis textarea{width:100%;font:inherit;font-size:13px;color:var(--deep);background:#fff;border:1px solid #cfdfe2;border-radius:9px;padding:14px 15px;margin-top:8px;outline:0;transition:border-color .2s,box-shadow .2s}
.rufous-devis textarea{resize:vertical;min-height:110px}
.rufous-devis input:focus,.rufous-devis select:focus,.rufous-devis textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,141,174,.12)}

/* Boutons */
.rufous-devis .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-size:13px;font-weight:600;letter-spacing:.01em;transition:.2s;border:0;cursor:pointer;font-family:inherit}
.rufous-devis .btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(255,154,0,.22)}
.rufous-devis .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,154,0,.32)}
.rufous-devis .btn-light{background:var(--pale);color:var(--deep);border:1px solid #d6e4e6;box-shadow:none}
.rufous-devis .btn-light:hover{background:#e3f0f2}
.rufous-devis .btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}

/* Responsive (repris des points de rupture de devis.html) */
@media(max-width:1100px){
  .rufous-devis .quote-layout{grid-template-columns:250px minmax(0,1fr);gap:38px}
  .rufous-devis .quote-form{padding:42px 38px}
}
@media(max-width:1024px){
  .rufous-devis{padding:76px 0}
}
@media(max-width:1000px){
  .rufous-devis .quote-layout{grid-template-columns:1fr}
  .rufous-devis .quote-aside{position:static}
  .rufous-devis .quote-aside-inner{padding:24px}
  .rufous-devis .quote-step-nav{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}
  .rufous-devis .quote-step-nav button{border-right:1px solid rgba(255,255,255,.14);padding:11px}
  .rufous-devis .quote-aside-help{display:none}
  .rufous-devis .quote-form{min-height:0}
}
@media(max-width:700px){
  .rufous-devis .form-row,.rufous-devis .form-row-three{grid-template-columns:1fr}
  .rufous-devis{padding-top:58px}
  .rufous-devis .quote-aside-inner{border-radius:12px 38px 12px 12px}
  .rufous-devis .quote-step-nav{grid-template-columns:1fr 1fr}
  .rufous-devis .quote-step-nav button{font-size:12px}
  .rufous-devis .quote-form{padding:30px 20px;border-radius:14px 46px 14px 14px}
  .rufous-devis .number-grid,.rufous-devis .number-grid-four,.rufous-devis .form-choice-grid,.rufous-devis .form-choice-grid-small,.rufous-devis .comfort-choice,.rufous-devis .quote-review{grid-template-columns:1fr 1fr}
  .rufous-devis .comfort-choice label>span{min-height:132px}
  .rufous-devis .quote-actions{align-items:stretch;flex-direction:column-reverse}
  .rufous-devis .quote-actions .btn{width:100%}
  .rufous-devis .inline-choice{align-items:stretch;flex-direction:column}
}
@media(max-width:600px){
  .rufous-devis{padding:56px 0}
}
@media(max-width:440px){
  .rufous-devis .number-grid,.rufous-devis .number-grid-four,.rufous-devis .form-choice-grid,.rufous-devis .form-choice-grid-small,.rufous-devis .comfort-choice,.rufous-devis .quote-review{grid-template-columns:1fr}
}

/* =========================================================
   Modal de fin de processus (remerciement / statut d'envoi)
   ========================================================= */
.rufous-devis-modal-overlay{position:fixed;inset:0;background:rgba(7,63,73,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s ease}
.rufous-devis-modal-overlay.is-open{opacity:1;visibility:visible}
.rufous-devis-modal{background:#fff;border-radius:18px 54px 18px 18px;max-width:440px;width:100%;padding:38px 34px 32px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.25);transform:translateY(14px);transition:transform .25s ease;font-family:Montserrat,Arial,sans-serif}
.rufous-devis-modal-overlay.is-open .rufous-devis-modal{transform:translateY(0)}
.rufous-devis-modal-inner{position:relative}
.rufous-devis-modal-close{position:absolute;top:-14px;right:-14px;width:30px;height:30px;border-radius:50%;border:0;background:#f1f7f8;color:#073f49;cursor:pointer;font-size:14px;line-height:1}
.rufous-devis-modal-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:26px;font-weight:700}
.rufous-devis-modal[data-state="sending"] .rufous-devis-modal-icon{background:#f1f7f8;color:#008dae}
.rufous-devis-modal[data-state="success"] .rufous-devis-modal-icon{background:#e3f6ea;color:#1f9d55}
.rufous-devis-modal[data-state="error"] .rufous-devis-modal-icon{background:#fdecec;color:#d64545}
.rufous-devis-modal h3{font-size:20px;color:#073f49;margin:0 0 10px}
.rufous-devis-modal p{font-size:13px;color:#64777b;line-height:1.6;margin:0 0 22px}
.rufous-devis-modal .btn{min-width:160px}
.rufous-devis-spinner{width:26px;height:26px;border:3px solid rgba(0,141,174,.25);border-top-color:#008dae;border-radius:50%;animation:rufousSpin .7s linear infinite;display:inline-block}
@keyframes rufousSpin{to{transform:rotate(360deg)}}
body.rufous-devis-modal-open{overflow:hidden}