/* =============================================================================
   OMYRIA — estimateur.css
   Habillage du questionnaire de devis (overlay plein écran piloté par
   assets/js/estimateur.js). Esthétique OMYRIA : dialogue clair sur voile noir,
   cartes à bord net, sélection = encre, fourchette en grand chiffre Sora.
   ============================================================================= */

/* ---------- Voile + dialogue ---------- */
.est-overlay{
  position:fixed;inset:0;z-index:2000;display:block;
  background:var(--paper);
  opacity:0;transition:opacity var(--t) var(--ease-out);
}
.est-overlay[hidden]{display:none;}
.est-overlay.is-open{opacity:1;}
.est-dialog{
  position:relative;background:var(--paper);width:100%;height:100vh;height:100svh;max-width:none;margin:0;
  border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(10px);transition:transform var(--t) var(--ease-out);
}
.est-overlay.is-open .est-dialog{transform:none;}

/* ---------- En-tête du dialogue ---------- */
.est-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);}
.est-brand{display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:600;
  letter-spacing:.1em;font-size:.92rem;color:var(--ink);flex:none;}
.est-brand svg{width:24px;height:24px;color:var(--ink);}
.est-progress{flex:1;display:flex;flex-direction:column;gap:.45em;min-width:0;}
.est-progress__label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);}
.est-progress__label b{color:var(--ink);font-weight:600;}
.est-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.est-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:2px;
  transition:width var(--t) var(--ease-out);}
.est-close{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);
  border:1px solid var(--line);color:var(--ink);transition:background var(--t-fast),border-color var(--t-fast);}
.est-close:hover{background:var(--paper-2);border-color:var(--ink);}
.est-close svg{width:20px;height:20px;}

.est-back{margin:var(--sp-4) var(--sp-5) 0;display:inline-flex;align-items:center;gap:.4em;
  color:var(--muted);font-size:var(--fs-sm);width:max-content;transition:color var(--t-fast);}
.est-back:hover{color:var(--ink);}
.est-back svg{width:18px;height:18px;}
.est-back[hidden]{display:none;}

/* ---------- Scène : panneaux empilés (transition) ---------- */
.est-stage{position:relative;flex:1;display:grid;justify-items:center;align-content:center;
  padding:clamp(2rem,6vh,5rem) clamp(1.5rem,5vw,3rem) clamp(3rem,8vh,6rem);overflow-y:auto;}
.est-stage>*{grid-column:1;grid-row:1;width:100%;max-width:800px;align-self:start;}

.est-panel__eyebrow,.est-result__eyebrow{display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);}
.est-panel__eyebrow::before,.est-result__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);}
.est-panel h3,.est-result h3,.est-final h3{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.7rem);letter-spacing:-.025em;margin:.5em 0 .35em;color:var(--ink);}
.est-panel__sub{color:var(--muted);font-size:var(--fs-sm);}
.est-panel__body{margin-top:var(--sp-5);}

/* ---------- Cartes de choix ---------- */
.est-cards{display:grid;gap:var(--sp-3);}
.est-cards--single,.est-cards--multi{grid-template-columns:repeat(2,1fr);}
.est-cards--duo{grid-template-columns:repeat(2,1fr);}
.est-cards--trio{grid-template-columns:repeat(3,1fr);}
@media (max-width:560px){.est-cards--single,.est-cards--multi,.est-cards--duo,.est-cards--trio{grid-template-columns:1fr;}}

.est-card{position:relative;text-align:left;display:flex;flex-direction:column;gap:.3em;
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);}
.est-card:hover{border-color:var(--ink);transform:translateY(-2px);}
.est-card.is-selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.est-card__icon{color:var(--ink);margin-bottom:.2em;}
.est-card__icon svg{width:26px;height:26px;}
.est-card__title{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);}
.est-card__sub{font-size:var(--fs-sm);color:var(--muted);line-height:1.45;}
.est-card__check{position:absolute;top:var(--sp-3);right:var(--sp-3);width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--paper);opacity:0;
  transition:opacity var(--t-fast),background var(--t-fast);}
.est-card__check svg{width:13px;height:13px;}
.est-card.is-selected .est-card__check{opacity:1;background:var(--ink);border-color:var(--ink);}
.est-card__tag{margin-top:.3em;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.15em .6em;width:max-content;}

/* ---------- Stepper (− valeur +) ---------- */
.est-stepper-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-5) 0;}
.est-stepper{display:inline-flex;align-items:center;gap:var(--sp-5);}
.est-step-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--ink);transition:border-color var(--t-fast),background var(--t-fast);}
.est-step-btn:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2);}
.est-step-btn:disabled{opacity:.3;cursor:not-allowed;}
.est-step-btn svg{width:20px;height:20px;}
.est-step-value{font-family:var(--font-display);font-weight:600;font-size:2.6rem;min-width:130px;
  text-align:center;color:var(--ink);font-variant-numeric:tabular-nums;}
.est-step-value small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--fs-sm);
  color:var(--muted);letter-spacing:0;}
.est-step-hint{text-align:center;color:var(--muted);font-size:var(--fs-sm);}
.est-step-hint b{color:var(--ink);}

/* ---------- Formulaire (lead) ---------- */
.est-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
@media (max-width:560px){.est-row{grid-template-columns:1fr;}}
.est-consent{font-size:var(--fs-xs);color:var(--faint);margin:var(--sp-2) 0 var(--sp-4);}
.est-error{display:none;color:var(--red-ink);font-size:var(--fs-sm);margin-bottom:var(--sp-3);font-weight:500;}
.est-error.is-on{display:block;}
.est-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.est-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(251,251,249,.35);
  border-top-color:var(--paper);border-radius:50%;animation:estspin .7s linear infinite;}
@keyframes estspin{to{transform:rotate(360deg);}}
.est-nav{display:flex;justify-content:center;margin-top:clamp(var(--sp-6),4vh,var(--sp-8));}
.est-textarea-wrap{margin-top:var(--sp-4);}
.est-ta{min-height:150px;font-size:var(--fs-body);line-height:1.6;}

/* ---------- Résultat (fourchette) ---------- */
.est-result__eyebrow{margin-bottom:.3em;}
.est-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em;font-family:var(--font-display);
  font-weight:600;font-size:clamp(2.2rem,1.4rem + 3.5vw,3.4rem);color:var(--ink);
  letter-spacing:-.02em;margin:.2em 0 var(--sp-5);}
.est-num{font-variant-numeric:tabular-nums;}
.est-sep{font-size:.42em;color:var(--muted);font-weight:400;}
.est-amount__unit{flex-basis:100%;font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:400;color:var(--muted);letter-spacing:0;}

.est-breakdown{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);}
.est-breakdown__head{display:flex;align-items:center;gap:.5em;font-weight:500;font-size:var(--fs-sm);
  color:var(--ink);margin-bottom:var(--sp-3);}
.est-breakdown__head svg{width:18px;height:18px;color:var(--muted);}
.est-line{display:flex;justify-content:space-between;gap:var(--sp-4);padding:.55em 0;
  border-top:1px solid var(--line-soft);font-size:var(--fs-sm);}
.est-line:first-of-type{border-top:0;}
.est-line__label{color:var(--ink-body);}
.est-line__price{font-family:var(--font-mono);color:var(--ink);white-space:nowrap;}
.est-line__price--incl{color:#1B7A4B;}
.est-line--total{border-top:1px solid var(--line);margin-top:.25em;}
.est-line--total .est-line__label,.est-line--total .est-line__price{color:var(--ink);font-weight:600;}

.est-recurring{margin-bottom:var(--sp-4);}
.est-recurring__title{display:flex;align-items:center;gap:.5em;font-weight:500;font-size:var(--fs-sm);
  color:var(--ink);margin-bottom:var(--sp-2);}
.est-recurring__title svg{width:18px;height:18px;color:var(--muted);}
.est-recurring ul{list-style:none;margin-bottom:var(--sp-2);}
.est-recurring li{display:flex;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-sm);
  color:var(--muted);padding:.25em 0;}

.est-note{display:flex;gap:.7em;background:var(--paper-2);border-radius:var(--r-md);
  padding:var(--sp-4);margin-bottom:var(--sp-5);}
.est-note svg{width:22px;height:22px;color:var(--ink);flex:none;}
.est-note p{font-size:var(--fs-sm);color:var(--ink-body);}
.est-result__cta{display:flex;justify-content:center;margin-top:var(--sp-4);}

/* ---------- Remerciement ---------- */
.est-final{text-align:center;padding:var(--sp-5) 0 var(--sp-4);}
.est-final__badge{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;margin:0 auto var(--sp-5);}
.est-final__badge svg{width:30px;height:30px;}
.est-final p{color:var(--muted);max-width:48ch;margin:0 auto var(--sp-4);}
.est-summary{text-align:left;background:var(--paper-2);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0;}
.est-summary__title{display:flex;align-items:center;gap:.45em;font-weight:600;font-size:var(--fs-sm);color:var(--ink);margin-bottom:var(--sp-2);}
.est-summary__title svg{width:18px;height:18px;}

/* ---------- Transitions de panneaux (data-anim posé par estimateur.js) ---------- */
[data-anim]{animation-duration:.34s;animation-timing-function:var(--ease-out);animation-fill-mode:both;}
@keyframes estInNext{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes estOutNext{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(-26px);}}
@keyframes estInPrev{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@keyframes estOutPrev{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(26px);}}
[data-anim="in-next"]{animation-name:estInNext;}
[data-anim="out-next"]{animation-name:estOutNext;animation-duration:.22s;}
[data-anim="in-prev"]{animation-name:estInPrev;}
[data-anim="out-prev"]{animation-name:estOutPrev;animation-duration:.22s;}

@media (max-width:560px){
  .est-head{padding:.9rem 1.25rem;gap:var(--sp-3);}
  .est-back{margin:.9rem 1.25rem 0;}
  .est-stage{padding:1.5rem 1.25rem 3rem;align-content:start;}
}
@media (prefers-reduced-motion:reduce){
  .est-overlay,.est-dialog,[data-anim]{transition:none;animation:none;}
  .est-spinner{animation:none;}
}