/* Fenêtres du site et comparateur des fermetures, communs à l'accueil et à l'atelier 3D (séparés de accueil.html le 10/10/2026 :
   David veut le tableau comparatif dans l'atelier 3D, derrière un « ? » à côté de « Fermeture »). Les fenêtres (David, 09/10/2026) :
   chaque fermeture s'ouvre sur ses explications et ses vraies photos ; « Les comparer » ouvre un tableau comparatif et une aide au choix.
   Variables du site avec une valeur de repli : l'atelier 3D n'a pas toutes celles de site.css. */
html:has(dialog[open]){overflow:hidden}
.dlg{width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--rayon,26px);background:var(--noir-2);color:var(--blanc);overflow:auto;overscroll-behavior:contain}
.dlg::backdrop{background:rgba(11,11,14,.8)}
.dlg[open]{animation:dlgEntre .45s var(--vite)}
@keyframes dlgEntre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.dlg-fermer{position:sticky;top:14px;float:right;z-index:3;margin:14px 14px -60px 0;width:46px;height:46px;border-radius:50%;background:var(--blanc);color:var(--encre);display:grid;place-items:center;transition:background .2s}
.dlg-fermer:hover{background:var(--acide)}
.dlg-fermer svg{width:18px;height:18px}
#dlgComparer{width:min(1400px,calc(100vw - 32px))}   /* plus large quand l'écran le permet (David, 09/10/2026) */
.comparer{padding:32px 40px}
.comparer h2{padding-right:56px;font-size:clamp(44px,5vw,84px)}
.comparer-intro{margin:14px 0 12px;color:var(--gris);font-size:17px}
.besoins{display:flex;flex-wrap:wrap;gap:8px}
.besoins button{height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ligne-fort);font-size:15.5px;font-weight:600;transition:background .2s,color .2s,box-shadow .2s}
.besoins button:hover{box-shadow:inset 0 0 0 1.5px var(--acide)}
.besoins button[aria-pressed="true"]{background:var(--acide);color:var(--encre);box-shadow:none}
.conseil{min-height:1.5em;margin:16px 0 18px;font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.1;text-transform:uppercase;color:var(--acide)}
.table-defile{overflow-x:auto;margin:0 -32px;padding:0 32px 6px}
.tableau{width:100%;min-width:860px;table-layout:fixed;border-collapse:separate;border-spacing:6px 0}
.tableau th,.tableau td{padding:14px 14px;vertical-align:top;text-align:left;font-size:15.5px;line-height:1.35;background:var(--noir-3);transition:background .25s,color .25s}
.tableau thead th{padding:10px;border-radius:16px 16px 0 0}
.tableau tbody tr:last-child td{border-radius:0 0 16px 16px}
.tableau tbody th{width:150px;background:none;padding-left:0;color:var(--gris);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tableau thead th:first-child{width:150px;background:none}
.tableau .col button{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;text-align:center;font-family:var(--display);font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:inherit}
.tableau .col img{width:100%;aspect-ratio:1;border-radius:12px;background:var(--f)}
.tableau td{text-align:center}   /* textes centrés (David, 09/10/2026) */
.tableau tbody tr:nth-child(even) td{background:#2B2B34}
.jauge{display:block;max-width:170px;height:12px;margin:4px auto;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.jauge i{display:block;width:var(--v);height:100%;border-radius:6px;background:var(--acide);transform-origin:left}
#dlgComparer[open] .jauge i{animation:charge 1.3s var(--doux,cubic-bezier(.22,.61,.36,1)) calc(.25s + var(--d,0s)) both}
@keyframes charge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tableau .reco .jauge{background:rgba(11,11,14,.16)}
.tableau .reco .jauge i{background:var(--encre)}   /* lignes alternées, discrètes */
.tableau .reco,.tableau tbody tr td.reco{background:var(--acide);color:var(--encre)}
.tableau tbody tr:nth-child(even) td.reco{background:#CBF52F}
.comparer h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;margin:0;text-wrap:balance}
@media (max-width:860px){
  .dlg{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  #dlgComparer{width:100vw}
  .comparer{padding:18px}
  .table-defile{margin:0 -18px;padding:0 18px 6px}
  .tableau{min-width:760px}
}
@media (prefers-reduced-motion:reduce){ .dlg[open]{animation:none} #dlgComparer[open] .jauge i{animation:none} }