/* ==========================================================================
   BIMsmarter.eu - outils.css (refonte "Calques", octobre 2026)
   Pages /ifc-viewer-audit et /smart-tools-bim.
   S'appuie sur les composants communs de site.css (sec-head, schedule,
   tabs + sheet, faq-list, quotes, cta) ; ne definit que les variantes
   propres a ces deux pages. Aucune couleur hors charte.
   ========================================================================== */

/* ---------- Utilitaires de mise en page ---------- */
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
.cols-2 > p { max-width: 62ch; }
.cols-2 > p:last-child { margin-bottom: 0; }
.section-navy .cols-2 strong { color: #fff; }

.after-grid { margin-top: 28px; max-width: 76ch; }
.sec-head:last-child { margin-bottom: 0; }
.after-grid:last-child { margin-bottom: 0; }

/* Tableaux poses sur un calque clair : fond blanc */
.section-alt table { background: var(--bg); }
.table-wrap.narrow { max-width: 720px; }
.table-wrap.narrow table, .table-wrap .grades { min-width: 0; }

/* Nomenclature a deux colonnes (pas de lien en troisieme colonne) */
@media (min-width: 820px) {
  .schedule.sch-2 .sch-head, .schedule.sch-2 .sch-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.schedule.sch-2 .sch-row h3 { font-size: 1.125rem; }

/* FAQ : titre a gauche, accordeon a droite */
@media (min-width: 960px) {
  .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
  .faq-grid > h2 { position: sticky; top: calc(var(--bar) + 24px); margin-top: 0; }
}

/* ==========================================================================
   /ifc-viewer-audit
   ========================================================================== */

/* Onglets des familles de controles : compteur discret */
.tab-n {
  display: inline-block; margin-left: 2px; padding: 0 6px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.5; color: var(--text-muted);
  border: 1px solid var(--rule-strong); font-feature-settings: "tnum";
}
.tabs [role="tab"][aria-selected="true"] .tab-n { color: var(--navy); border-color: var(--navy); }

/* Planche de controles : double cadre de site.css, contenu en tableau */
.sheet.sheet-ctrl { display: block; }
.sheet.sheet-ctrl[hidden] { display: none; }
.ctrl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding: 22px 22px 18px; border-bottom: 1.5px solid var(--navy);
  background:
    linear-gradient(rgba(14, 44, 80, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(14, 44, 80, 0.07) 1px, transparent 1px) 0 0 / 24px 24px;
  background-color: #F7FAFC;
}
.ctrl-head h3 { margin: 0; font-family: var(--font); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--navy); }
.ctrl-head p { margin: 0; font-size: 0.875rem; color: var(--text-muted); }

table.ctrl { margin: 0; border: 0; font-size: 0.9375rem; }
.ctrl thead th { padding: 10px 16px; }
.ctrl td { padding: 16px; vertical-align: top; }
.ctrl tbody tr:last-child td { border-bottom: 0; }
.ctrl .c-id { width: 64px; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--navy); white-space: nowrap; padding-left: 22px; }
.ctrl thead th:first-child { padding-left: 22px; }
.ctrl .c-nm strong { display: block; color: var(--navy); font-size: 1rem; }
.ctrl .c-nm span { display: block; margin-top: 4px; color: var(--text-muted); max-width: 62ch; }
.ctrl .c-cr { width: 140px; }
.ctrl .c-at { width: 26%; font-size: 0.875rem; color: var(--text); padding-right: 22px; }
.ctrl thead th:last-child { padding-right: 22px; }

/* Criticite : jauge a trois traits (3 = critique, 2 = importante, 1 = moyenne) */
.crit {
  --c1: var(--navy); --c2: var(--navy); --c3: var(--navy);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 500; color: var(--navy);
}
.crit::before {
  content: ""; flex: none; width: 20px; height: 8px;
  background: linear-gradient(90deg, var(--c1) 0 6px, transparent 6px 7px, var(--c2) 7px 13px, transparent 13px 14px, var(--c3) 14px 20px);
}
.crit-2 { --c3: rgba(14, 44, 80, 0.16); }
.crit-1 { --c2: rgba(14, 44, 80, 0.16); --c3: rgba(14, 44, 80, 0.16); font-weight: 400; color: var(--text-muted); }
.crit-3 { font-weight: 600; }

@media (max-width: 719px) {
  .ctrl thead { display: none; }
  .ctrl, .ctrl tbody, .ctrl td { display: block; width: auto; }
  .ctrl tr { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 16px 14px 18px; border-bottom: 1px solid var(--rule); }
  .ctrl tbody tr:last-child { border-bottom: 0; }
  .ctrl td, .ctrl .c-id, .ctrl .c-cr, .ctrl .c-at { padding: 0; border: 0; width: auto; }
  .ctrl .c-id { grid-row: 1; grid-column: 1; padding-left: 0; }
  .ctrl .c-cr { grid-row: 1; grid-column: 2; justify-self: end; }
  .ctrl .c-nm { grid-row: 2; grid-column: 1 / -1; margin-top: 8px; }
  .ctrl .c-at { grid-row: 3; grid-column: 1 / -1; margin-top: 10px; padding-right: 0; }
  .ctrl .c-at::before { content: attr(data-l); display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
  .ctrl-head { padding: 18px 14px 14px; }
}

/* Profils pays : le cartouche des decomptes */
.profiles { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.profiles > p { margin: 0; max-width: 60ch; color: var(--text-muted); }
@media (min-width: 1000px) {
  .profiles { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
}
.pf-cells {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5px; margin: 0;
  background: var(--navy); border: 1.5px solid var(--navy);
}
@media (min-width: 600px) { .pf-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-cells > div { background: var(--bg); padding: 16px 16px 18px; }
.pf-cells dt { font: 700 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--font); color: var(--navy); font-feature-settings: "tnum"; }
.pf-cells dd { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }

/* Note d'audit : bareme a gauche, capture a droite */
.note-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.note-grid .a { margin-bottom: 28px; }
@media (min-width: 1000px) {
  .note-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: center; }
}
.grades td { vertical-align: middle; }
.grades td:first-child { width: 64px; }
.grades td:nth-child(2) { white-space: nowrap; }
.grades td:first-child strong { font: 700 1.75rem/1 var(--font); color: var(--navy); }
.note-after { margin: 24px 0 0; color: var(--text-muted); max-width: 60ch; }
.shot { margin: 0; padding: 8px; border: 1px solid var(--rule-strong); background: var(--bg); }
.shot img { width: 100%; height: auto; }

/* Exports : liste de definitions bordee */
.defs { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--navy); }
.defs li { margin: 0; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; color: var(--text-muted); }
.defs li strong { font-family: var(--font); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--navy); }
@media (min-width: 820px) {
  .defs li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 28px; align-items: baseline; }
}
.loop { margin: 32px 0 0; max-width: 72ch; padding-left: 20px; border-left: 1.5px solid var(--accent); }

/* Pour aller plus loin */
.further { list-style: none; padding: 0; margin: 24px 0 56px; max-width: 880px; border-top: 1.5px solid var(--navy); }
.further li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); }

/* A propos de l'auteur */
.author { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule-strong); max-width: 780px; font-size: 0.9375rem; color: var(--text-muted); }
.author p { margin: 0 0 6px; }
.author .author-k { font-weight: 600; color: var(--navy); }

/* ==========================================================================
   /smart-tools-bim
   ========================================================================== */

/* Probleme -> outil */
.pb-table td:first-child { color: var(--navy); font-weight: 500; width: 34%; }
.pb-table td:nth-child(2) { width: 22%; }
.pb-table td:nth-child(2) a { font-weight: 600; }
/* Mobile : chaque ligne devient une fiche (libelles repris des en-tetes) */
@media (max-width: 719px) {
  .pb-wrap { overflow: visible; padding: 0; }
  .pb-wrap table.pb-table { min-width: 0; }
  .pb-table thead { display: none; }
  .pb-table, .pb-table tbody, .pb-table tr, .pb-table td { display: block; width: auto !important; }
  .pb-table tr { padding: 16px 16px 18px; border-bottom: 1px solid var(--rule); }
  .pb-table tbody tr:last-child { border-bottom: 0; }
  .pb-table td { padding: 0; border: 0; }
  .pb-table td + td { margin-top: 10px; }
  .pb-table td[data-l]::before { content: attr(data-l); display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
}
.offers-table table { min-width: 0; }

/* Les quatre outils : des planches a double cadre posees sur le calque */
.tools .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tool-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px; border: 1px solid var(--rule-strong); background: var(--bg); }
.tool-sheet::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--navy); pointer-events: none; }
.tool-sheet > * { position: relative; }
.tool-body { padding: 26px 22px 26px; }
.tool-body h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); max-width: 22ch; }
.tool-body > p { max-width: 60ch; }
.tool-body .ticks { margin: 20px 0 0; }
.tool-cta { margin: 28px 0 0; }
.tool-media {
  display: grid; gap: 18px; align-content: start;
  padding: 22px 18px;
  border-top: 1.5px solid var(--navy);
  background:
    linear-gradient(rgba(14, 44, 80, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(14, 44, 80, 0.07) 1px, transparent 1px) 0 0 / 24px 24px;
  background-color: #F7FAFC;
}
.tool-media .tool-shot { width: 100%; height: auto; background: var(--bg); }
.tool-media .video-embed { margin: 0; }
@media (min-width: 960px) {
  .tool-sheet { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .tool-body { padding: 38px 36px 36px; }
  .tool-media { border-top: 0; border-left: 1.5px solid var(--navy); padding: 30px 28px; }
}

/* Tarifs : deux offres, un cadre chacune */
.tarifs-tldr { max-width: 84ch; margin-bottom: 40px; }
.offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 40px; }
@media (min-width: 760px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer-sheet { display: flex; flex-direction: column; padding: 26px 26px 28px; border: 1.5px solid var(--navy); background: var(--bg); }
.offer-sheet h3 { margin: 0; font-size: 1.0625rem; color: var(--navy); }
.offer-price { margin: 12px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); font: 700 clamp(2.5rem, 2rem + 1.8vw, 3.5rem)/1 var(--font); color: var(--navy); letter-spacing: -0.01em; }
.offer-sheet .ticks { margin: 0 0 28px; }
.offer-cta { margin: auto 0 0; }

.why { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule-strong); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.why h3 { margin: 0; max-width: 30ch; }
.why p { margin: 0; max-width: 72ch; color: var(--text-muted); }
@media (min-width: 960px) { .why { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; } }

/* AI Act */
.aiact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.aiact h2 { margin-top: 0; }
.aiact p { max-width: 60ch; margin-bottom: 0; }
.aiact-badge img { width: 100%; max-width: 340px; height: auto; }
@media (min-width: 820px) { .aiact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; } .aiact-badge { justify-self: end; } }