/* Page « Formules & tarifs » — styles propres à la page.
   Chargé uniquement sur cette page par wallify_page_style().
   Le balisage vit dans patterns/formules-tarifs.php, le configurateur dans
   assets/js/pages/formules-tarifs.js. Les montants sont portés par les
   attributs data-one / data-mon du balisage : le JS ne les invente pas. */

/* --- listes à puces vertes des cartes --- */
.wf-tarifs .wf-check{padding-left:28px;position:relative;margin-bottom:12px;font-size:.93rem;color:#14183a}
.wf-tarifs .wf-check i{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#fdeef5;color:#e31c79;font-weight:800;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-style:normal}
.wf-tarifs .wf-dark .wf-check{color:#fff}
.wf-tarifs .wf-dark .wf-check i{background:#2a2f5c;color:#ffc933}

/* --- choix de la formule --- */
.wf-tarifs .wf-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:38px}
.wf-tarifs .wf-mode-btn{font-family:inherit;text-align:left;background:#fff;border:1.5px solid #e8e9f1;border-radius:14px;padding:18px 20px;cursor:pointer;color:#14183a;transition:border-color .15s,background-color .15s,color .15s}
.wf-tarifs .wf-mode-btn:hover{border-color:#c9cce0}
.wf-tarifs .wf-mode-btn b{display:block;font-size:1rem;font-weight:800}
.wf-tarifs .wf-mode-btn span{display:block;color:#6b7089;font-size:.86rem;margin-top:4px}
.wf-tarifs .wf-mode-btn[aria-pressed="true"]{background:#14183a;border-color:#14183a;color:#fff}
.wf-tarifs .wf-mode-btn[aria-pressed="true"] span{color:#b7bbd2}
.wf-tarifs .wf-mode-btn:focus-visible{outline:3px solid #ffc933;outline-offset:3px}

/* --- grille configurateur --- */
.wf-tarifs .wf-cfg{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start}
.wf-tarifs .wf-block{margin-bottom:38px}
.wf-tarifs .wf-block h3{font-size:1.06rem;font-weight:800;color:#14183a;margin-bottom:5px}
.wf-tarifs .wf-hint{color:#6b7089;font-size:.9rem;line-height:1.6;margin-bottom:16px}

/* --- modules et options --- */
.wf-tarifs .wf-mod,.wf-tarifs .wf-opt{display:grid;grid-template-columns:22px 1fr auto;gap:13px;align-items:start;padding:14px 0;border-top:1px solid #e8e9f1}
.wf-tarifs .wf-mod:last-of-type,.wf-tarifs .wf-opt:last-of-type{border-bottom:1px solid #e8e9f1}
.wf-tarifs .wf-mod input,.wf-tarifs .wf-opt input{width:19px;height:19px;margin:2px 0 0;accent-color:#e31c79;cursor:pointer}
.wf-tarifs .wf-mod label,.wf-tarifs .wf-opt label{cursor:pointer;display:block}
.wf-tarifs .wf-mod .nm,.wf-tarifs .wf-opt .nm{display:block;font-weight:700;font-size:.96rem;color:#14183a}
.wf-tarifs .wf-mod .ds,.wf-tarifs .wf-opt .ds{display:block;color:#6b7089;font-size:.86rem;line-height:1.5;margin-top:2px}
.wf-tarifs .wf-mod .pr{text-align:right;font-weight:800;font-size:.95rem;color:#14183a;white-space:nowrap}
.wf-tarifs .wf-mod .pr em{display:block;font-style:normal;font-weight:400;font-size:.78rem;color:#6b7089;margin-top:2px}
.wf-tarifs .wf-mod.rec .pr{color:#6c4bd8}
.wf-tarifs .wf-opt{grid-template-columns:22px 1fr}

/* --- champs (avance, mise en place) --- */
.wf-tarifs .wf-field{margin-top:24px}
.wf-tarifs .wf-field>label{display:block;font-weight:700;font-size:.94rem;color:#14183a;margin-bottom:8px}
.wf-tarifs .wf-field .sub{font-weight:400;color:#6b7089}
.wf-tarifs .wf-chips{display:flex;flex-wrap:wrap;gap:8px}
.wf-tarifs .wf-chip{font-family:inherit;font-size:.9rem;border:1.5px solid #e8e9f1;background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;color:#14183a;transition:border-color .15s,background-color .15s,color .15s}
.wf-tarifs .wf-chip:hover{border-color:#c9cce0}
.wf-tarifs .wf-chip[aria-pressed="true"]{border-color:#e31c79;background:#fdeef5;color:#b81261;font-weight:700}
.wf-tarifs .wf-chip:focus-visible{outline:3px solid #ffc933;outline-offset:3px}
.wf-tarifs input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:6px;background:#e8e9f1;outline:none;cursor:pointer}
.wf-tarifs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#e31c79;border:4px solid #fff;box-shadow:0 1px 6px rgba(20,24,58,.35)}
.wf-tarifs input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#e31c79;border:4px solid #fff;box-shadow:0 1px 6px rgba(20,24,58,.35)}
.wf-tarifs input[type=range]:focus-visible{outline:3px solid #ffc933;outline-offset:4px}

/* --- panneau récapitulatif --- */
.wf-tarifs .wf-panel{position:sticky;top:24px;background:#14183a;color:#fff;border-radius:20px;padding:30px}
.wf-tarifs .wf-lede{color:#9ea3bf;font-size:.86rem;font-weight:600;letter-spacing:.02em}
.wf-tarifs .wf-big{font-size:2.6rem;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:6px 0 2px}
.wf-tarifs .wf-then{color:#ffc933;font-size:.92rem;font-weight:700;margin-top:8px}
.wf-tarifs .wf-rows{margin-top:24px;border-top:1px solid #2e3460;padding-top:10px}
.wf-tarifs .wf-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:.91rem}
.wf-tarifs .wf-row span{color:#b7bbd2}
.wf-tarifs .wf-row b{font-weight:700;white-space:nowrap}
.wf-tarifs .wf-row.tot{border-top:1px solid #2e3460;margin-top:10px;padding-top:14px;font-size:1rem}
.wf-tarifs .wf-row.tot span{color:#fff;font-weight:700}
.wf-tarifs .wf-own{margin-top:24px;background:#0e1130;border-radius:14px;padding:20px}
.wf-tarifs .wf-own h4{font-size:.9rem;font-weight:800;color:#ffc933;margin-bottom:12px}
.wf-tarifs .wf-bar{height:9px;border-radius:999px;background:#262c57;overflow:hidden;display:flex}
.wf-tarifs .wf-bar i{display:block;height:100%;background:linear-gradient(90deg,#6c4bd8,#e31c79)}
.wf-tarifs .wf-bar u{display:block;height:100%;flex:1;background:#ffc933}
.wf-tarifs .wf-scale{display:flex;justify-content:space-between;font-size:.76rem;color:#8f94b4;margin-top:8px}
.wf-tarifs .wf-own p{font-size:.86rem;color:#b7bbd2;line-height:1.6;margin-top:12px}
.wf-tarifs .wf-panel .wf-cta{display:block;text-align:center;background:#e31c79;color:#fff;font-weight:700;padding:14px 22px;border-radius:999px;margin-top:22px}

/* --- maintenance comprise / non comprise --- */
.wf-tarifs .wf-mcard{background:#fff;border:1px solid #e8e9f1;border-radius:18px;padding:28px 30px}
.wf-tarifs .wf-mcard h3{font-size:.82rem;font-weight:800;color:#e31c79;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.wf-tarifs .wf-mcard.off h3{color:#6b7089}
.wf-tarifs .wf-mline{position:relative;padding-left:20px;font-size:.93rem;line-height:1.6;color:#14183a;margin-bottom:11px}
.wf-tarifs .wf-mline:last-child{margin-bottom:0}
.wf-tarifs .wf-mline::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:#e31c79}
.wf-tarifs .wf-mcard.off .wf-mline{color:#6b7089}
.wf-tarifs .wf-mcard.off .wf-mline::before{background:#c3c7d8}

/* --- mode Souverain : le panneau prend toute la largeur --- */
.wf-tarifs .wf-cfg.sov{grid-template-columns:1fr}
.wf-tarifs .wf-panel.sov{position:static}
.wf-tarifs .wf-sovhead{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:end}
.wf-tarifs .wf-sovhead p{font-size:.95rem;color:#b7bbd2;line-height:1.65}
.wf-tarifs .wf-sovgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.wf-tarifs .wf-sovcard{background:#0e1130;border-radius:14px;padding:22px 24px}
.wf-tarifs .wf-sovcard h4{font-size:.95rem;font-weight:800;color:#ffc933;margin-bottom:9px}
.wf-tarifs .wf-sovcard p{font-size:.89rem;color:#b7bbd2;line-height:1.6}
.wf-tarifs .wf-sovcta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:22px;border-top:1px solid #2e3460}
.wf-tarifs .wf-sovcta p{font-size:.9rem;color:#b7bbd2;line-height:1.6;max-width:64ch}
@media (max-width:820px){
  .wf-tarifs .wf-sovhead,.wf-tarifs .wf-sovgrid{grid-template-columns:1fr}
}

/* --- responsive --- */
@media (max-width:900px){
  .wf-tarifs .wf-cfg{grid-template-columns:1fr;gap:28px}
  .wf-tarifs .wf-panel{position:static}
  .wf-tarifs .wf-modes{grid-template-columns:1fr}
}
@media (max-width:768px){
  .wf-tarifs .wf-mod,.wf-tarifs .wf-opt{grid-template-columns:22px 1fr;row-gap:6px}
  .wf-tarifs .wf-mod .pr{grid-column:2;text-align:left}
  .wf-tarifs .wf-mod .pr em{display:inline;margin-left:6px}
  .wf-tarifs .wf-panel{padding:24px}
  .wf-tarifs .wf-mcard{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){.wf-tarifs *{transition:none !important}}