/* TiKamp — refonte graphique 2026-10 : styles d'ORIGINE de la page « tarifs ».
   FICHIER PRODUIT par scripts/refonte-feuille-origine.js — NE PAS MODIFIER À LA MAIN.
   Il reprend, sous la garde html[data-refonte], les règles de la page d'origine et
   celles que ses scripts posent eux-mêmes. L'habillage refondu est écrit à la main
   dans tk-refonte-public.css (chargée après). */

/* ── tarifs.html — <style> n° 1 ── */
html[data-refonte] body.page-tarifs { --border-2:#C9D1C7; --err:#B42318; --err-soft:#FDECEA }
html[data-refonte] main.origine * { box-sizing:border-box; }
html[data-refonte] main.origine [hidden] { display:none !important; }
html[data-refonte] body.page-tarifs { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.55; }
html[data-refonte] main.origine a { color:var(--primary); text-underline-offset:3px; }
html[data-refonte] main.origine a:hover { color:var(--primary-hover); }
html[data-refonte] main.origine :focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
html[data-refonte] main.origine .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-refonte] main.origine .skip { position:absolute; top:-56px; left:8px; background:var(--ink); color:#fff; padding:12px 16px; border-radius:8px; z-index:100; }
html[data-refonte] main.origine .skip:focus { top:8px; }
html[data-refonte] main.origine .o-entete.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface); }
html[data-refonte] main.origine .back-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; }
html[data-refonte] main.origine .back-link:hover { color:var(--primary); }
html[data-refonte] main.origine { max-width:1120px; margin:0 auto; padding:40px 16px 64px; }
html[data-refonte] main.origine h1 { font-size:36px; line-height:1.12; margin:0 0 12px; letter-spacing:-.02em; text-wrap:balance; max-width:22ch; }
html[data-refonte] main.origine h2 { font-size:24px; line-height:1.25; margin:0 0 8px; letter-spacing:-.01em; }
html[data-refonte] main.origine h3 { font-size:18px; line-height:1.3; margin:0; }
html[data-refonte] main.origine .lead { color:var(--ink-2); margin:0 0 16px; max-width:62ch; font-size:17px; }
html[data-refonte] main.origine .intro-sous { color:var(--ink-2); margin:0 0 24px; max-width:62ch; }
html[data-refonte] main.origine .pastille-tva { display:inline-flex; align-items:center; gap:8px; margin:0 0 24px; padding:6px 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary-hover); font-size:14px; font-weight:600; }
html[data-refonte] main.origine .raccourcis { display:flex; flex-wrap:wrap; gap:8px 12px; margin:0 0 40px; padding:0; list-style:none; }
html[data-refonte] main.origine .raccourcis a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:border-color .16s ease, color .16s ease; }
html[data-refonte] main.origine .raccourcis a:hover { border-color:var(--primary); color:var(--primary); }
html[data-refonte] main.origine .raccourcis a.plein { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine .raccourcis a.plein:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
html[data-refonte] main.origine section.bloc { margin:0 0 56px; scroll-margin-top:16px; }
html[data-refonte] main.origine .bloc-tete { margin:0 0 20px; }
html[data-refonte] main.origine .bloc-tete p { margin:0; color:var(--ink-2); max-width:66ch; }
html[data-refonte] main.origine .tg-cadre { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
html[data-refonte] main.origine .tg { width:100%; border-collapse:collapse; font-size:15px; }
html[data-refonte] main.origine .tg th,
html[data-refonte] main.origine .tg td { padding:16px; text-align:left; vertical-align:top; }
html[data-refonte] main.origine .tg thead th { background:var(--bg); color:var(--ink-2); font-size:13px; font-weight:600; letter-spacing:.02em; border-bottom:1px solid var(--border); }
html[data-refonte] main.origine .tg tbody tr + tr > * { border-top:1px solid var(--border); }
html[data-refonte] main.origine .tg tbody th { width:19%; }
html[data-refonte] main.origine .tg thead th:nth-child(3) { min-width:132px; }
html[data-refonte] main.origine .tg-val { display:block; min-width:0; }
html[data-refonte] main.origine .tg-titre { display:block; font-weight:700; color:var(--ink); }
html[data-refonte] main.origine .tg-sous { display:block; font-weight:400; font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .tg-detail { display:block; margin-top:4px; font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .tg td strong { color:var(--ink); font-weight:700; }
html[data-refonte] main.origine .tg-exemples tbody th { width:34%; }
html[data-refonte] main.origine .tg-exemples td { font-variant-numeric:tabular-nums; font-weight:600; }
html[data-refonte] main.origine .tg-exemples td:last-child { font-weight:400; color:var(--ink-2); }
html[data-refonte] main.origine .regles { margin:0; padding:24px 24px 24px 44px; background:var(--surface); border:1px solid var(--border); border-radius:16px; display:grid; gap:12px; max-width:860px; }
html[data-refonte] main.origine .regles li { padding-left:4px; color:var(--ink-2); }
html[data-refonte] main.origine .regles li::marker { color:var(--primary); }
html[data-refonte] main.origine .regles strong { color:var(--ink); }
html[data-refonte] main.origine .sim { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px; align-items:start; }
html[data-refonte] main.origine .carte { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:0 1px 2px rgba(10,31,20,.04); min-width:0; }
html[data-refonte] main.origine .sim-form { display:grid; gap:20px; }
html[data-refonte] main.origine fieldset { border:0; margin:0; padding:0; min-width:0; }
html[data-refonte] main.origine legend { padding:0; margin:0 0 8px; font-size:15px; font-weight:600; }
html[data-refonte] main.origine .modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
html[data-refonte] main.origine .mode { position:relative; display:flex; }
html[data-refonte] main.origine .mode input { position:absolute; opacity:0; width:1px; height:1px; }
html[data-refonte] main.origine .mode label { flex:1; display:flex; flex-direction:column; gap:2px; min-height:64px; padding:12px 14px; border:1px solid var(--border-2); border-radius:12px; background:var(--surface); cursor:pointer; font-weight:600; font-size:15px; line-height:1.3; transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
html[data-refonte] main.origine .mode label span { font-weight:400; font-size:13px; color:var(--ink-2); }
html[data-refonte] main.origine .mode label:hover { border-color:var(--ink-3); }
html[data-refonte] main.origine .mode input:checked + label { border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary); }
html[data-refonte] main.origine .mode input:focus-visible + label { outline:2px solid var(--ink); outline-offset:3px; }
html[data-refonte] main.origine .champ { display:flex; flex-direction:column; gap:8px; min-width:0; }
html[data-refonte] main.origine .champ label,
html[data-refonte] main.origine .champ .libelle { font-size:15px; font-weight:600; color:var(--ink); }
html[data-refonte] main.origine .champ .opt { font-weight:400; color:var(--ink-2); }
html[data-refonte] main.origine .champ input[type="text"],
html[data-refonte] main.origine .champ select { width:100%; min-height:48px; padding:12px 16px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:12px; transition:border-color .16s ease, box-shadow .16s ease; }
html[data-refonte] main.origine .champ select { appearance:none; -webkit-appearance:none; padding-right:44px; text-overflow:ellipsis; overflow:hidden; white-space:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233A453F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
html[data-refonte] main.origine .champ input[type="text"]:hover,
html[data-refonte] main.origine .champ select:hover { border-color:var(--ink-3); }
html[data-refonte] main.origine .champ input[type="text"]:focus,
html[data-refonte] main.origine .champ select:focus { outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
html[data-refonte] main.origine .champ [aria-invalid="true"] { border-color:var(--err) !important; background-color:var(--err-soft) !important; }
html[data-refonte] main.origine .champ ::placeholder { color:var(--ink-3); opacity:1; }
html[data-refonte] main.origine .saisie-euro { position:relative; }
html[data-refonte] main.origine .saisie-euro input[type="text"] { padding-right:44px; font-variant-numeric:tabular-nums; }
html[data-refonte] main.origine .saisie-euro .unite { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--ink-2); font-weight:600; pointer-events:none; }
html[data-refonte] main.origine .aide-champ { margin:0; font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .err-champ { margin:0; font-size:14px; font-weight:600; color:var(--err); }
html[data-refonte] main.origine .err-champ:empty { display:none; }
html[data-refonte] main.origine .duo { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
html[data-refonte] main.origine .groupe { display:grid; gap:16px; padding:16px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
html[data-refonte] main.origine .groupe-titre { margin:0; font-size:15px; font-weight:700; }
html[data-refonte] main.origine .case { display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:10px 0; cursor:pointer; font-weight:600; }
html[data-refonte] main.origine .case input { flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--primary); }
html[data-refonte] main.origine .case span span { display:block; font-weight:400; font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .devis-commune { margin:0; padding:12px 16px; border-radius:12px; background:var(--primary-soft); color:var(--ink-2); font-size:15px; }
html[data-refonte] main.origine .devis-commune strong { display:block; color:var(--ink); }
html[data-refonte] main.origine .devis-commune a { display:flex; align-items:center; width:fit-content; min-height:44px; font-weight:600; color:var(--primary-hover); }
html[data-refonte] main.origine .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; border-radius:12px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease; }
html[data-refonte] main.origine .btn:hover { border-color:var(--primary); color:var(--primary); }
html[data-refonte] main.origine .btn:active { transform:translateY(1px); }
html[data-refonte] main.origine .btn.plein { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine .btn.plein:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
html[data-refonte] main.origine .btn[aria-disabled="true"] { cursor:progress; background:var(--ink-3); border-color:var(--ink-3); color:#fff; transform:none; }
html[data-refonte] main.origine .tourne { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:tourne .8s linear infinite; flex:none; }
@keyframes tourne { to { transform:rotate(360deg); } }
html[data-refonte] main.origine .alerte { margin:0; padding:12px 16px; border-radius:12px; background:var(--err-soft); border:1px solid #F3B5AE; color:#7A1A10; font-size:15px; }
html[data-refonte] main.origine .alerte:empty { display:none; }
html[data-refonte] main.origine .sim-resultat { position:sticky; top:16px; transition:opacity .2s ease; }
html[data-refonte] main.origine .sim-resultat[aria-busy="true"] { opacity:.55; }
html[data-refonte] main.origine .res-vide { display:grid; gap:8px; justify-items:start; color:var(--ink-2); }
html[data-refonte] main.origine .res-vide h3 { color:var(--ink); }
html[data-refonte] main.origine .res-titre { margin:0 0 4px; }
html[data-refonte] main.origine .res-titre:focus { outline:none; }
html[data-refonte] main.origine .res-sous { margin:0 0 16px; color:var(--ink-2); font-size:14px; }
html[data-refonte] main.origine .res-partie + .res-partie { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
html[data-refonte] main.origine .res-partie h4 { margin:0 0 12px; font-size:16px; line-height:1.3; }
html[data-refonte] main.origine .res-partie h4 span { display:block; font-size:14px; font-weight:400; color:var(--ink-2); }
html[data-refonte] main.origine .res-prix { margin:0 0 12px; padding:12px 16px; border-radius:12px; background:var(--primary-soft); color:var(--primary-hover); }
html[data-refonte] main.origine .res-prix strong { font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; }
html[data-refonte] main.origine .res-tuiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px; }
html[data-refonte] main.origine .res-tuile { margin:0; padding:16px; border-radius:12px; background:var(--bg); border:1px solid var(--border); min-width:0; }
html[data-refonte] main.origine .res-tuile dt { font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .res-tuile dd { margin:4px 0 0; font-size:26px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
html[data-refonte] main.origine .res-tuile dd small { display:block; margin-top:4px; font-size:13px; font-weight:400; color:var(--ink-2); }
html[data-refonte] main.origine .res-lignes { margin:0; display:grid; }
html[data-refonte] main.origine .res-lignes div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--border); }
html[data-refonte] main.origine .res-lignes dt { flex:1 1 auto; color:var(--ink-2); min-width:0; }
html[data-refonte] main.origine .res-lignes dd { flex:0 0 auto; max-width:55%; margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; min-width:0; }
html[data-refonte] main.origine details.res-detail { margin-top:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
html[data-refonte] main.origine details.res-detail summary { display:flex; align-items:center; min-height:44px; padding:10px 16px; font-weight:600; font-size:15px; color:var(--primary-hover); list-style:none; }
html[data-refonte] main.origine details.res-detail summary::-webkit-details-marker { display:none; }
html[data-refonte] main.origine details.res-detail summary::before { content:""; flex:none; width:8px; height:8px; margin-right:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .16s ease; }
html[data-refonte] main.origine details.res-detail[open] summary::before { transform:rotate(45deg); }
html[data-refonte] main.origine .detail-corps { padding:0 16px 16px; overflow-x:auto; }
html[data-refonte] main.origine .detail-corps table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
html[data-refonte] main.origine .detail-corps th,
html[data-refonte] main.origine .detail-corps td { padding:8px 4px; text-align:right; border-top:1px solid var(--border); white-space:nowrap; }
html[data-refonte] main.origine .detail-corps thead th { white-space:normal; }
html[data-refonte] main.origine .detail-corps th[scope="row"],
html[data-refonte] main.origine .detail-corps thead th:first-child { text-align:left; white-space:normal; font-weight:600; }
html[data-refonte] main.origine .detail-corps thead th { color:var(--ink-2); font-weight:600; border-top:0; }
html[data-refonte] main.origine .detail-corps td.sous,
html[data-refonte] main.origine .detail-corps th.sous { color:var(--ink-2); font-weight:400; }
html[data-refonte] main.origine .res-abos,
html[data-refonte] main.origine .res-projection { margin-top:24px; padding:16px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
html[data-refonte] main.origine .res-abos h4,
html[data-refonte] main.origine .res-projection h4 { margin:0 0 8px; font-size:16px; }
html[data-refonte] main.origine .res-abos p { margin:0; color:var(--ink-2); }
html[data-refonte] main.origine .res-abos strong { color:var(--ink); }
html[data-refonte] main.origine .res-projection .res-lignes div:first-child { border-top:0; }
html[data-refonte] main.origine .res-projection .res-lignes .total { border-top:2px solid var(--ink); }
html[data-refonte] main.origine .res-projection .res-lignes .total dt { color:var(--ink); font-weight:700; }
html[data-refonte] main.origine .res-notes { margin:24px 0 0; padding:0 0 0 18px; color:var(--ink-2); font-size:14px; display:grid; gap:4px; }
html[data-refonte] main.origine .faq { display:grid; gap:12px; max-width:860px; }
html[data-refonte] main.origine .faq details { background:var(--surface); border:1px solid var(--border); border-radius:12px; }
html[data-refonte] main.origine .faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 20px; font-weight:600; list-style:none; cursor:pointer; }
html[data-refonte] main.origine .faq summary::-webkit-details-marker { display:none; }
html[data-refonte] main.origine .faq summary::after { content:"+"; flex:none; font-size:22px; line-height:1; color:var(--primary); transition:transform .16s ease; }
html[data-refonte] main.origine .faq details[open] summary::after { transform:rotate(45deg); }
html[data-refonte] main.origine .faq details p { margin:0; padding:0 20px 16px; color:var(--ink-2); max-width:70ch; }
html[data-refonte] main.origine .devis { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:32px; border-radius:16px; background:var(--primary-hover); color:#fff; }
html[data-refonte] main.origine .devis h2 { color:#fff; margin:0 0 4px; }
html[data-refonte] main.origine .devis p { margin:0; color:#D4E8D8; max-width:56ch; }
html[data-refonte] main.origine .devis .actions { display:flex; gap:12px; flex-wrap:wrap; }
html[data-refonte] main.origine .devis .btn { border-color:#fff; }
html[data-refonte] main.origine .devis .btn.clair { background:#fff; color:var(--primary-hover); }
html[data-refonte] main.origine .devis .btn.clair:hover { background:var(--primary-soft); color:var(--primary-hover); }
html[data-refonte] main.origine .devis .btn.contour { background:transparent; color:#fff; }
html[data-refonte] main.origine .devis .btn.contour:hover { background:rgba(255,255,255,.12); color:#fff; }
html[data-refonte] main.origine .devis a:focus-visible { outline-color:#fff; }
@media (max-width:960px) {
  html[data-refonte] main.origine .sim { grid-template-columns:minmax(0,1fr); }
  html[data-refonte] main.origine .sim-resultat { position:static; }
  html[data-refonte] main.origine .duo { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
}
@media (max-width:860px) {
  html[data-refonte] main.origine .tg thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  html[data-refonte] main.origine .tg-cadre { background:none; border:0; border-radius:0; overflow:visible; }
  html[data-refonte] main.origine .tg,
  html[data-refonte] main.origine .tg tbody,
  html[data-refonte] main.origine .tg tr,
  html[data-refonte] main.origine .tg th,
  html[data-refonte] main.origine .tg td { display:block; width:auto; }
  html[data-refonte] main.origine .tg tbody tr { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:4px 0; }
  html[data-refonte] main.origine .tg tbody tr + tr { margin-top:12px; }
  html[data-refonte] main.origine .tg tbody tr + tr > * { border-top:0; }
  html[data-refonte] main.origine .tg tbody th,
  html[data-refonte] main.origine .tg-exemples tbody th { width:auto; padding:16px 16px 8px; }
  html[data-refonte] main.origine .tg tbody td { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:12px; padding:10px 16px; border-top:1px solid var(--border) !important; }
  html[data-refonte] main.origine .tg tbody td::before { content:attr(data-label); font-size:14px; color:var(--ink-2); font-weight:400; }
  html[data-refonte] main.origine .tg-exemples td:last-child { color:var(--ink); }
}
@media (max-width:640px) {
  html[data-refonte] main.origine { padding-top:32px; }
  html[data-refonte] main.origine h1 { font-size:30px; }
  html[data-refonte] main.origine h2 { font-size:22px; }
  html[data-refonte] main.origine .lead { font-size:16px; }
  html[data-refonte] main.origine section.bloc { margin-bottom:48px; }
  html[data-refonte] main.origine .carte { padding:20px 16px; }
  html[data-refonte] main.origine .regles { padding:20px 16px 20px 36px; }
  html[data-refonte] main.origine .duo { grid-template-columns:minmax(0,1fr); }
  html[data-refonte] main.origine .modes { grid-template-columns:minmax(0,1fr); }
  html[data-refonte] main.origine .sim-form .btn { width:100%; }
  html[data-refonte] main.origine .devis { padding:24px 16px; }
  html[data-refonte] main.origine .devis .actions,
  html[data-refonte] main.origine .devis .btn { width:100%; }
}
@media (max-width:420px) {
  html[data-refonte] main.origine .tg tbody td { grid-template-columns:minmax(0,1fr); gap:2px; }
  html[data-refonte] main.origine .res-tuiles { grid-template-columns:minmax(0,1fr); }
  html[data-refonte] main.origine .res-tuile dd { font-size:24px; }
  html[data-refonte] main.origine .carte { padding:16px 12px; }
  html[data-refonte] main.origine .detail-corps { padding:0 8px 12px; }
  html[data-refonte] main.origine .detail-corps table { font-size:13px; }
  html[data-refonte] main.origine .detail-corps th,
  html[data-refonte] main.origine .detail-corps td { padding:6px 2px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-refonte] main.origine .btn,
  html[data-refonte] main.origine .mode label,
  html[data-refonte] main.origine .champ input,
  html[data-refonte] main.origine .champ select,
  html[data-refonte] main.origine .raccourcis a,
  html[data-refonte] main.origine .sim-resultat,
  html[data-refonte] main.origine details.res-detail summary::before,
  html[data-refonte] main.origine .faq summary::after { transition:none; }
  html[data-refonte] main.origine .tourne { animation-duration:2.4s; }
}