/* ==========================================================================
   Calculateur TLPE (TPE, ex-TLPE) — art-piramida.com
   Fichier NEUF et INDÉPENDANT (22/09/2026) : n'importe jamais style.css,
   ne redéfinit aucune variable --root déjà posée, se contente de les
   consommer. Toutes les classes sont préfixées ap-calc- (sauf .ap-mot-allume
   et .ap-bouton, composants globaux réutilisés tels quels) pour ne jamais
   toucher aux anciennes classes .ap-tlpe-* (app.js/style.css, laissées
   mortes mais intactes).
   ========================================================================== */

*,
.ap-calc,
.ap-calc *{box-sizing:border-box}

/* ---- réassurance sous le H1 ---- */
.ap-calc-reassurance{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:18px 0 0;padding:0}
.ap-calc-reassurance li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sourde)}
.ap-calc-reassurance svg{width:18px;height:18px;flex:none;color:var(--conforme)}

/* ---- carte conteneur ---- */
.ap-tlpe.ap-calc{padding:20px}
@media (min-width:640px){.ap-tlpe.ap-calc{padding:28px}}

.ap-calc-grille{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;min-width:0}
@media (min-width:900px){.ap-calc-grille{grid-template-columns:1.25fr 1fr}}

.ap-calc-form{min-width:0;display:flex;flex-direction:column;gap:26px}

.ap-calc-champ-groupe{min-width:0}
.ap-calc-label-groupe{display:block;font-family:var(--police-boitier);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--encre);margin-bottom:10px}
.ap-calc-aide{font-size:13px;color:var(--sourde);margin:8px 0 0;line-height:1.5}
.ap-calc-aide--argon{color:var(--argon)}

/* ---- cartes radio (support / commune) ---- */
.ap-calc-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:480px){.ap-calc-cartes{grid-template-columns:1fr 1fr}}
.ap-calc-carte{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:14px 8px;text-align:center;font-size:13px;line-height:1.3;background:var(--fond);border:1.5px solid var(--filet);cursor:pointer;color:var(--sourde);transition:border-color .15s ease,color .15s ease,background .15s ease}
.ap-calc-carte svg{width:30px;height:30px;color:var(--sourde);transition:color .15s ease}
.ap-calc-carte input{position:absolute;opacity:0;width:1px;height:1px}
.ap-calc-carte:has(input:checked){border-color:var(--accent);color:var(--encre);background:var(--plaque-haute)}
.ap-calc-carte:has(input:checked) svg{color:var(--accent)}
.ap-calc-carte:has(input:focus-visible){outline:2px solid var(--argon);outline-offset:2px}
.ap-calc-carte:hover{border-color:var(--sourde)}
.ap-calc-cartes--commune .ap-calc-carte{padding-block:16px}
.ap-calc-carte-titre{font-weight:600}

/* ---- champs surface ---- */
.ap-calc-surface-lignes{display:grid;grid-template-columns:1fr 130px;gap:14px}
@media (max-width:420px){.ap-calc-surface-lignes{grid-template-columns:1fr}}
.ap-calc-champ label{display:block;font-size:13px;color:var(--sourde);margin-bottom:6px}
.ap-calc-champ input[type="number"]{width:100%;min-height:44px;border:1.5px solid var(--filet);background:var(--fond);color:var(--encre);padding:10px 12px;font-size:16px}
.ap-calc-champ input[type="number"]:focus-visible{outline:2px solid var(--argon);outline-offset:1px;border-color:var(--argon)}
.ap-calc-stepper{display:flex;align-items:stretch;border:1.5px solid var(--filet);background:var(--fond)}
.ap-calc-stepper input{border:0;background:transparent;width:100%;min-width:0;text-align:center;font-size:16px;padding:10px 2px;-moz-appearance:textfield}
.ap-calc-stepper input::-webkit-outer-spin-button,.ap-calc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ap-calc-stepper button{min-width:44px;min-height:44px;font-size:18px;color:var(--encre);background:var(--plaque);flex:none}
.ap-calc-stepper button:hover{background:var(--filet)}
.ap-calc-stepper button:focus-visible{outline:2px solid var(--argon);outline-offset:-2px}

.ap-calc-cumul{margin:12px 0 6px;font-size:14px;color:var(--encre)}
.ap-calc-cumul strong{font-family:var(--police-boitier)}

.ap-calc-slider{width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:0;background:linear-gradient(to right,var(--argon) 0 5.8%,var(--filet) 5.8% 100%);margin:10px 0 4px;min-height:26px;cursor:pointer}
.ap-calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--plaque-haute);box-shadow:0 0 0 1px var(--filet);cursor:grab}
.ap-calc-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--plaque-haute);box-shadow:0 0 0 1px var(--filet);cursor:grab}
.ap-calc-slider:focus-visible{outline:2px solid var(--argon);outline-offset:3px}
.ap-calc-slider-repere{display:flex;justify-content:space-between;font-size:11px;color:var(--sourde);margin-bottom:4px}

.ap-calc-erreur{color:#A8291A;font-size:13px;margin-top:8px}
.ap-calc-erreur:empty{display:none}

/* ---- toggle numérique ---- */
.ap-calc-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:var(--encre);min-height:44px}
.ap-calc-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.ap-calc-toggle-piste{position:relative;width:44px;height:26px;flex:none;background:var(--filet);border:1px solid var(--sourde);transition:background .15s ease}
.ap-calc-toggle-piste::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--plaque-haute);transition:transform .15s ease}
.ap-calc-toggle input:checked + .ap-calc-toggle-piste{background:var(--argon);border-color:var(--argon)}
.ap-calc-toggle input:checked + .ap-calc-toggle-piste::after{transform:translateX(18px)}
.ap-calc-toggle input:focus-visible + .ap-calc-toggle-piste{outline:2px solid var(--argon);outline-offset:2px}

/* ---- panneau résultat ---- */
.ap-calc-resultat{background:var(--plaque-haute);border:1.5px solid var(--encre);padding:26px 24px;min-width:0}
@media (min-width:900px){.ap-calc-resultat{position:sticky;top:calc(var(--entete-h) + 16px)}}
.ap-calc-meta{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--sourde);margin-bottom:6px}
.ap-calc-montant{font-family:var(--police-boitier);font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--accent);word-break:break-word}
/* fond opaque (pas de color-mix/alpha) : le ratio de contraste doit rester mesurable directement,
   sans dépendre de ce qu'il y a derrière (mémoire "instrument ment plus que le site") */
.ap-calc-badge{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 12px;font-size:13px;font-weight:600;color:var(--conforme);background:#E7F3EB;border:1px solid var(--conforme)}
.ap-calc-badge:empty{display:none}
.ap-calc-detail{margin-top:16px;padding-top:16px;border-top:1px solid var(--filet);font-size:14px;color:var(--encre);line-height:1.6}
.ap-calc-detail p{margin:0 0 6px}
.ap-calc-detail .ap-calc-detail-taux{color:var(--argon);font-weight:600}
.ap-calc-detail a{color:var(--argon);text-decoration:underline}

.ap-calc-baremes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.ap-calc-baremes span{display:block;padding:8px 6px;font-size:11px;line-height:1.35;text-align:center;background:var(--fond);color:var(--argon);border:1px solid var(--filet)}
.ap-calc-baremes span.est-actif{background:var(--argon);color:#fff;border-color:var(--argon);font-weight:700}

.ap-calc-cta{display:block;width:100%;text-align:center;margin-top:20px;min-height:44px}
.ap-calc-lien-methode{display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--argon);text-decoration:underline;text-underline-offset:3px}

.ap-calc-resultat-mobile{display:none}

/* ---- barre collante mobile ---- */
@media (max-width:899.98px){
  /* la carte détaillée (montant + détail + tableau barème + CTA) reste dans le fil normal de la
     page, en pleine lecture ; seule la mini-barre .ap-calc-resultat-mobile (montant + CTA) colle
     en bas d'écran. Un seul élément sticky, jamais deux imbriqués. */
  .ap-calc-resultat{position:static;padding:0;border:0;background:transparent;box-shadow:none}
  .ap-calc-resultat-corps{background:var(--plaque-haute);border:1.5px solid var(--encre);padding:20px 20px 24px}
  .ap-calc-resultat-mobile{position:sticky;bottom:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--plaque-haute);border-top:1.5px solid var(--encre);box-shadow:0 -6px 18px rgba(17,12,15,.14)}
  .ap-calc-resultat-mobile span{font-family:var(--police-boitier);font-size:1.25rem;color:var(--accent)}
  .ap-calc-resultat-mobile .ap-bouton{min-height:44px;padding-inline:16px;white-space:nowrap}
}

/* ---- tableau tarifs ---- */
.ap-calc-section{margin-top:52px;max-width:100%}
.ap-calc-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.ap-calc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ap-calc-table caption{text-align:left}
.ap-calc-table th,.ap-calc-table td{padding:10px 12px;border:1px solid var(--filet);text-align:left}
.ap-calc-table thead th{background:var(--encre);color:#fff;font-family:var(--police-boitier);font-weight:400;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.ap-calc-table tbody tr:nth-child(even){background:var(--plaque)}
.ap-calc-table tbody tr:nth-child(odd){background:var(--plaque-haute)}
.ap-calc-table td{color:var(--argon);font-weight:600}
.ap-calc-table th[scope="row"]{color:var(--encre);font-weight:600}
.ap-calc-table-numerique td{color:var(--sourde);font-weight:400;font-size:13px}

/* ---- exemples chiffrés ---- */
.ap-calc-exemples{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}
.ap-calc-exemple{background:var(--plaque);border:1px solid var(--filet);padding:18px}
.ap-calc-exemple h3{margin-bottom:4px}
.ap-calc-exemple-montant{font-family:var(--police-boitier);font-size:1.7rem;color:var(--accent);margin:10px 0 0}

/* ---- liste réduire ---- */
.ap-calc-liste{margin:14px 0 0;padding-left:22px;line-height:1.65}
.ap-calc-liste li{margin-bottom:8px}

/* ---- FAQ ---- */
.ap-calc-faq-item{border-bottom:1px solid var(--filet);padding:16px 0}
.ap-calc-faq-item summary{font-weight:600;cursor:pointer;line-height:1.5;min-height:44px;display:flex;align-items:center;list-style:none}
.ap-calc-faq-item summary::-webkit-details-marker{display:none}
.ap-calc-faq-item summary::before{content:"+";font-family:var(--police-boitier);color:var(--accent);margin-right:12px;font-size:20px;flex:none;width:20px}
.ap-calc-faq-item[open] summary::before{content:"–"}
.ap-calc-faq-item summary:focus-visible{outline:2px solid var(--argon);outline-offset:2px}
.ap-calc-faq-item p{margin:10px 0 0 32px;color:var(--sourde);line-height:1.65}

/* ---- sources ---- */
.ap-calc-sources{background:var(--fond);border-left:3px solid var(--argon);padding:20px 22px}
.ap-calc-liste-sources{margin:12px 0 0;padding-left:20px;font-size:13.5px;color:var(--sourde);line-height:1.7}
.ap-calc-liste-sources a{color:var(--argon);text-decoration:underline;text-underline-offset:2px}
.ap-calc-disclaimer{margin-top:14px;font-size:13px;color:var(--encre);font-style:italic}

/* ---- non configuré ---- */
.ap-tlpe-non-configure{padding:20px;text-align:center;color:var(--sourde);border:1px dashed var(--filet)}

/* ---- accessibilité mouvement ---- */
@media (prefers-reduced-motion:reduce){
  .ap-calc *{transition:none!important;animation:none!important}
}