/* ══════════════════════════════════════════════════════════════════
   LE CALCULATEUR D'ESTIMATION, styles communs aux 3 pages de parcours.
   Fichier séparé pour ne pas répéter 200 lignes de CSS trois fois : une
   correction ici corrige les trois pages.
   ══════════════════════════════════════════════════════════════════ */

.calc-toggle{margin:36px 0 8px}
.calc-toggle label{display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  padding:18px 20px;border:1px solid rgba(27,42,71,.16);border-radius:14px;
  background:rgba(255,255,255,.68);max-width:640px;transition:border-color .25s}
.calc-toggle label:hover{border-color:rgba(195,33,54,.4)}
.calc-toggle input{position:absolute;opacity:0;width:0;height:0}
.calc-toggle .sw{flex:none;width:46px;height:26px;border-radius:99px;background:rgba(27,42,71,.22);
  position:relative;transition:background .25s;margin-top:2px}
.calc-toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.24)}
.calc-toggle input:checked + .sw{background:var(--rouge,#C32136)}
.calc-toggle input:checked + .sw::after{transform:translateX(20px)}
.calc-toggle input:focus-visible + .sw{outline:2px solid var(--rouge,#C32136);outline-offset:3px}
.calc-toggle .lb b{display:block;font-size:1rem;margin-bottom:3px}
.calc-toggle .lb em{font-style:normal;font-size:.88rem;color:var(--dim,rgba(27,42,71,.66));line-height:1.5}

.calc-grid{display:grid;gap:12px;margin-top:26px}

.calc-item{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:20px 22px;border:1px solid rgba(27,42,71,.14);border-radius:14px;
  background:rgba(255,255,255,.6);cursor:pointer;
  transition:border-color .25s,background .25s,opacity .3s,transform .3s}
.calc-item:hover{border-color:rgba(195,33,54,.36)}
/* L'état coché doit se voir d'un coup d'oeil, sinon on recompte à l'oeil. */
.calc-item:has(.calc-chk:checked){border-color:var(--rouge,#C32136);background:rgba(255,255,255,.94)}
.calc-item.off{display:none}

.calc-chk{position:absolute;opacity:0;width:0;height:0}
.calc-box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid rgba(27,42,71,.28);
  position:relative;transition:background .2s,border-color .2s}
.calc-item:has(.calc-chk:checked) .calc-box{background:var(--rouge,#C32136);border-color:var(--rouge,#C32136)}
.calc-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s}
.calc-item:has(.calc-chk:checked) .calc-box::after{transform:rotate(45deg) scale(1)}
.calc-chk:focus-visible + .calc-box{outline:2px solid var(--rouge,#C32136);outline-offset:3px}

.calc-txt b{display:block;font-size:1.04rem}
.calc-txt em{font-style:normal;font-size:.88rem;color:var(--dim,rgba(27,42,71,.66))}
.calc-txt .tag{display:inline-block;font-style:normal;font-family:var(--mono,monospace);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge,#C32136);
  border:1px solid rgba(195,33,54,.34);border-radius:99px;padding:2px 8px;margin-top:7px}

.calc-prix{text-align:right;white-space:nowrap}
.calc-prix b{display:block;font-size:1.24rem;letter-spacing:-.02em}
.calc-prix em{font-style:normal;font-size:.76rem;color:var(--dim,rgba(27,42,71,.66))}

.calc-qte{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  padding-top:14px;margin-top:4px;border-top:1px dashed rgba(27,42,71,.16)}
.calc-qte button{width:32px;height:32px;border-radius:8px;border:1px solid rgba(27,42,71,.2);
  background:#fff;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--encre,#1B2A47)}
.calc-qte button:hover{border-color:var(--rouge,#C32136);color:var(--rouge,#C32136)}
.calc-qte output{min-width:28px;text-align:center;font-weight:800;font-size:1.05rem}
.calc-qte em{font-style:normal;font-size:.84rem;color:var(--dim,rgba(27,42,71,.66))}

.calc-total{margin-top:26px;padding:26px 28px;border-radius:16px;
  background:var(--encre,#1B2A47);color:#fff;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px}
.calc-total .k{display:block;font-family:var(--mono,monospace);font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.56);margin-bottom:6px}
.calc-total b{font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.03em;line-height:1}
.calc-total b em{font-style:normal;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.6)}
.calc-note{margin:0;font-size:.88rem;color:rgba(255,255,255,.66);max-width:34ch}

.calc-fine{margin-top:16px;font-size:.8rem;color:var(--dim,rgba(27,42,71,.66));max-width:62ch}

@media(max-width:620px){
  .calc-item{grid-template-columns:auto 1fr;row-gap:10px}
  .calc-prix{grid-column:2;text-align:left}
  .calc-total{flex-direction:column;align-items:flex-start}
}

/* Repli pour les navigateurs sans :has() — l'état coché reste lisible. */
@supports not (selector(:has(*))){
  .calc-box{background:#fff}
  .calc-item{background:rgba(255,255,255,.72)}
}

/* ══════════════════════════════════════════════════════════════════
   RÉÉCRIT LE 2026-08-02 : le module n'est plus un calculateur, il
   explique le paiement et renvoie vers celui de Commerce. Les styles
   des cases à cocher et du toggle plus haut sont donc inutilisés ;
   ils restent au cas où Commerce exposerait un jour un shortcode qu'on
   pourrait habiller ici.
   ══════════════════════════════════════════════════════════════════ */
.calc-how{display:grid;gap:14px;margin-top:34px;grid-template-columns:1fr}
@media(min-width:720px){.calc-how{grid-template-columns:repeat(2,1fr)}}
.calc-how div{padding:22px 24px;border:1px solid rgba(27,42,71,.14);border-radius:14px;
  background:rgba(255,255,255,.62)}
.calc-how b{display:block;font-size:1.02rem;margin-bottom:8px}
.calc-how span{font-size:.92rem;line-height:1.56;color:var(--dim,rgba(27,42,71,.66))}

.calc-cta{margin-top:26px;padding:26px 28px;border-radius:16px;background:var(--encre,#1B2A47);
  color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.calc-cta b{display:block;font-size:1.14rem;margin-bottom:6px}
.calc-cta span{font-size:.9rem;color:rgba(255,255,255,.66);max-width:46ch;line-height:1.55}
.btn-ghost{flex:none;display:inline-flex;align-items:center;gap:9px;padding:15px 28px;
  border-radius:10px;border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;
  font-weight:700;font-size:.98rem;transition:background .22s,border-color .22s}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}