/* Balise · direction artistique « signalétique sécurité industrielle ».
   Jaune sécurité franc sur anthracite, rubans de chevrons diagonaux, panneaux inspirés de la norme ISO 7010
   (avertissement jaune, obligation bleue, condition sûre verte), esthétique de fiche de contrôle sur planche à pince.
   Titres en Barlow Condensed capitales, texte en Barlow, coins droits partout, ombres pleines décalées.
   Robuste et lisible, jamais anxiogène : le jaune balise, le bleu et le vert rassurent. */

:root {
  --bg: #F1EFE9;
  --surface: #FFFFFF;
  --surface-2: #E8E5DC;
  --paper: #FBFAF6;
  --ink: #1E2226;
  --ink-2: #3A4046;
  --muted: #5B6269;
  --line: #D3CFC4;
  --accent: #FFC20E;
  --accent-ink: #7A5200;
  --accent-soft: #FFF3C4;
  --on-accent: #1E2226;
  --anthracite: #1E2226;
  --anthracite-2: #2A2F34;
  --steel: #5B636B;
  --iso-blue: #0D5BA1;
  --iso-green: #1E7A4D;
  --iso-red: #B3261E;
  --ok: #1E7A4D; --ok-bg: #E4F1E8;
  --warn: #7A5200; --warn-bg: #FFF1C2;
  --ko: #B3261E; --ko-bg: #FAE3E0;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --head-weight: 800;
  --head-tracking: .01em;
  --radius: 0;
  --radius-btn: 0;
  --shadow: 6px 6px 0 rgba(30, 34, 38, .14);
  --maxw: 1200px;
  --header-bg: #1E2226;
  --header-ink: #F4F2EC;
  --footer-bg: #16191C;
  --footer-ink: #BCC1C6;
  --footer-strong: #FFFFFF;
  --chevron: repeating-linear-gradient(-45deg, #FFC20E 0 12px, #1E2226 12px 24px);
  --chevron-fine: repeating-linear-gradient(-45deg, #FFC20E 0 7px, #1E2226 7px 14px);
}

/* ---------- Base ---------- */
body { font-size: 17px; line-height: 1.62; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: var(--head-tracking); line-height: 1.02; text-transform: uppercase; }
h3, h4 { font-weight: 700; line-height: 1.1; }
a { color: var(--ink); text-decoration-color: #D99E00; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.skip:focus { background: var(--accent); color: var(--ink); font-weight: 600; }
.kicker { font: 700 15px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 10px; background: var(--chevron-fine); flex: none; }
.section { padding: 88px 0; }
.hero-grid, .presta-grid, .formules-grid, .consigne-grid, .reperes-grid, .diag-in, .faq-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .section { padding: 64px 0; } }

/* ---------- Boutons ---------- */
.btn { font: 700 17px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; padding: 12px 22px; min-height: 48px; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease, background-color .12s; }
.btn:hover { filter: none; background: #FFD03F; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-big { padding: 15px 28px; font-size: 19px; min-height: 56px; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: none; transform: none; }

/* ---------- En-tête ---------- */
.site-header { background: linear-gradient(var(--header-bg), var(--header-bg)) top / 100% calc(100% - 6px) no-repeat, var(--chevron-fine); padding-bottom: 6px; border-bottom: 0; color: var(--header-ink); }
.header-in { min-height: 72px; }
.brand { gap: 12px; }
.brand-logo { width: 42px; height: 42px; }
.brand-name { font: 800 28px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: #FFFFFF; }
.brand-tagline { font: 600 13px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-top: 3px; }
.nav { gap: 26px; }
.nav a { font: 600 16px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: #E6E4DE; opacity: 1; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav a.btn { color: var(--ink); padding: 10px 18px; min-height: 44px; box-shadow: 3px 3px 0 #000; border-color: var(--accent); }
.nav a.btn:hover { color: var(--ink); border-bottom-color: var(--accent); box-shadow: 5px 5px 0 #000; }
.nav-toggle { border: 2px solid rgba(255, 255, 255, .35); border-radius: 0; width: 46px; height: 44px; color: #FFFFFF; }
@media (max-width: 940px) {
  .nav { top: calc(100% + 6px); background: var(--anthracite-2); border-bottom: 6px solid var(--accent); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); padding: 6px 16px 18px; }
  .nav a { padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 18px; }
  .nav a.btn { margin-top: 14px; justify-content: center; }
}
@media (max-width: 420px) { .brand-name { font-size: 25px; } .brand-logo { width: 38px; height: 38px; } }

/* ---------- Accueil : héros ---------- */
.hero { background: var(--anthracite); color: #F4F2EC; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.hero-grid { position: relative; display: grid; gap: 40px; padding-top: 64px; padding-bottom: 72px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 48px; padding-top: 64px; padding-bottom: 80px; } }
.plate { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; background: var(--accent); color: var(--ink); font: 700 15px/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; padding: 9px 14px 8px; }
.plate-tri { width: 16px; height: 14px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hero h1 { font-size: clamp(46px, 6.2vw, 88px); line-height: .92; margin: 0 0 24px; color: #FFFFFF; letter-spacing: 0; }
.hero h1 .hl { display: block; color: var(--accent); }
.hero-lede { font-size: 19px; line-height: 1.6; color: #D7DADD; max-width: 600px; margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-bottom: 30px; }
.hero-cta .btn { box-shadow: 5px 5px 0 #000; }
.hero-cta .btn-ghost { color: #FFFFFF; box-shadow: none; }
.hero-specs { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: 10px 26px; font: 600 15px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .07em; color: #C9CDD1; }
.hero-specs li { display: flex; align-items: center; gap: 9px; }
.hero-specs li::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex: none; }
.hero-art { justify-self: center; width: 100%; max-width: 520px; }
.hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 979px) { .hero-art { max-width: 400px; } }
@media (max-width: 600px) { .hero-grid { padding-top: 40px; padding-bottom: 48px; gap: 28px; } .hero-lede { font-size: 17px; } .hero-cta .btn { flex: 1 1 100%; } .hero-specs { font-size: 14px; } }

/* ---------- Bandeau des repères chiffrés ---------- */
.ticker { background: var(--accent); color: var(--ink); position: relative; border-top: 10px solid var(--ink); border-bottom: 10px solid var(--ink); }
.ticker::before, .ticker::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--chevron-fine); }
.ticker::before { top: -10px; } .ticker::after { bottom: -10px; }
.ticker-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.ticker-list li { padding: 26px 20px 24px; display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--ink); }
.ticker-list li:first-child { border-left: 0; padding-left: 0; }
.t-big { font: 800 34px/1 var(--font-head); text-transform: uppercase; }
.t-big sup { font-size: .5em; vertical-align: super; line-height: 0; }
.t-txt { font-size: 15px; line-height: 1.4; }
@media (max-width: 979px) {
  .ticker-list { grid-template-columns: 1fr 1fr; }
  .ticker-list li { border-left: 0; border-top: 2px solid var(--ink); padding: 18px 14px 18px 0; }
  .ticker-list li:nth-child(-n+2) { border-top: 0; }
  .ticker-list li:nth-child(even) { padding-left: 16px; border-left: 2px solid var(--ink); }
  .ticker-list li:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .t-big { font-size: 28px; }
}

/* ---------- En-têtes de section ---------- */
.sec-head { max-width: 780px; margin-bottom: 44px; }
.sec-head h2, .presta-intro h2, .consigne-body h2, .diag-txt h2 { font-size: clamp(36px, 4.6vw, 58px); margin: 0 0 16px; }
.presta-intro h2 { font-size: clamp(36px, 4vw, 50px); }
.sec-head p { font-size: 18px; color: var(--ink-2); margin: 0; }
.sec-head p + p { margin-top: 12px; }

/* ---------- Prestations : fiche ---------- */
.presta-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .presta-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; } .presta-intro { position: sticky; top: 110px; } }
.presta-intro p { color: var(--ink-2); margin: 0 0 14px; }
.presta-intro .note { font-size: 15px; color: var(--muted); border-left: 4px solid var(--accent); padding: 2px 0 2px 12px; margin: 20px 0 26px; }
.fiche { background: var(--paper); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); position: relative; margin-top: 26px; }
.fiche::before { content: ""; position: absolute; top: -26px; left: 50%; width: 132px; height: 48px; margin-left: -66px; background: url("/assets/clip.svg") center / contain no-repeat; }
.fiche-head { margin: 0; display: flex; justify-content: space-between; gap: 12px; background: var(--ink); color: #FFFFFF; font: 700 16px/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; padding: 30px 24px 16px; }
.fiche-head span:last-child { background: var(--accent); color: var(--ink); padding: 4px 8px; margin: -4px 0; }
.fiche-list { list-style: none; margin: 0; padding: 0; }
.fiche-row { display: grid; grid-template-columns: 44px 56px minmax(0, 1fr); gap: 18px; padding: 24px 24px 22px; border-top: 1px solid var(--line); align-items: start; }
.fiche-row:first-child { border-top: 0; }
.fiche-num { font: 800 30px/1 var(--font-head); color: var(--ink); border-bottom: 4px solid var(--accent); padding-bottom: 6px; text-align: center; }
.fiche-row img { width: 56px; height: 56px; }
.fiche-body h3 { font-size: 25px; margin: 2px 0 8px; }
.fiche-body p { margin: 0 0 10px; color: var(--ink-2); font-size: 16px; }
.fiche-out { font-size: 15px !important; color: var(--ink) !important; margin: 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fiche-out span { font: 700 13px/1 var(--font-head); text-transform: uppercase; letter-spacing: .1em; background: var(--ink); color: var(--accent); padding: 5px 7px 4px; }
@media (max-width: 600px) {
  .fiche-row { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 16px; gap: 12px 14px; }
  .fiche-row img { grid-row: 1; grid-column: 2; width: 48px; height: 48px; }
  .fiche-num { grid-row: 1; grid-column: 1; align-self: center; }
  .fiche-body { grid-column: 1 / -1; }
  .fiche-head { padding: 30px 16px 14px; font-size: 14px; }
  .fiche { box-shadow: 6px 6px 0 var(--ink); }
}

/* ---------- Formules ---------- */
.formules { background: var(--surface-2); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.formules-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .formules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.formule { background: var(--surface); border: 2px solid var(--ink); display: flex; flex-direction: column; padding: 0 24px 26px; }
.formule:nth-child(2) { box-shadow: 8px 8px 0 var(--accent); }
.formule-head { margin: 0 -24px 22px; display: flex; align-items: stretch; background: var(--ink); color: #FFFFFF; font: 700 18px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.formule-num { background: var(--accent); color: var(--ink); padding: 14px 16px; font-weight: 800; font-size: 22px; }
.formule-eff { padding: 16px 16px 14px; align-self: center; }
.formule h3 { font-size: 30px; margin: 0 0 14px; }
.formule-prix { margin: 0 0 20px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); display: flex; flex-direction: column; gap: 4px; }
.formule-prix .from { font: 700 13px/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink); }
.formule-prix strong { font: 800 38px/1 var(--font-head); text-transform: uppercase; }
.formule-prix .ht { font-size: 14px; color: var(--muted); }
.formule ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex: 1; }
.formule li { padding-left: 30px; position: relative; font-size: 16px; line-height: 1.45; }
.formule li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 2px solid var(--ink); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231E2226' stroke-width='2.4'/%3E%3C/svg%3E") center / 14px no-repeat; }
.formule .btn { align-self: flex-start; }
.formules-note { margin: 34px 0 0; font-size: 15px; color: var(--ink-2); max-width: 900px; padding-left: 16px; border-left: 4px solid var(--ink); }

/* ---------- Comment ça marche : frise ---------- */
.methode { background: var(--anthracite); color: #E6E4DE; position: relative; }
.methode::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--chevron); }
.methode .sec-head { max-width: 900px; }
.methode h2 { color: #FFFFFF; }
.methode .kicker { color: var(--accent); }
.transparence { margin-top: 22px !important; font-size: 18px !important; color: #E6E4DE !important; background: var(--anthracite-2); border-left: 6px solid var(--accent); padding: 18px 22px; }
.transparence strong { color: var(--accent); font-weight: 600; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
@media (min-width: 980px) { .frise { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.frise li { position: relative; padding: 0 22px 26px 0; }
.frise li img { width: 56px; height: 56px; display: block; margin-bottom: 18px; position: relative; z-index: 1; }
@media (min-width: 980px) {
  .frise li::before { content: ""; position: absolute; left: 56px; right: 0; top: 26px; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 22px); }
  .frise li:last-child::before { display: none; }
}
@media (max-width: 979px) {
  .frise li { padding: 0 0 30px 78px; min-height: 90px; }
  .frise li img { position: absolute; left: 0; top: 0; }
  .frise li::before { content: ""; position: absolute; left: 26px; top: 60px; bottom: 4px; width: 4px; background: repeating-linear-gradient(180deg, var(--accent) 0 12px, transparent 12px 20px); }
  .frise li:last-child::before { display: none; }
}
.frise-num { display: inline-block; font: 700 14px/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); background: var(--accent); padding: 5px 8px 4px; margin-bottom: 10px; }
.frise h3 { color: #FFFFFF; font-size: 24px; margin: 0 0 8px; }
.frise p { margin: 0; font-size: 16px; color: #C9CDD1; }

/* ---------- Responsabilité : panneau de consigne ---------- */
.consigne-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .consigne-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; } }
@media (max-width: 899px) { .consigne-grid .consigne-sign { display: flex; align-items: center; max-width: none; padding: 0; text-align: left; } .consigne-grid .consigne-sign img { width: 76px; height: 76px; margin: 12px; flex: none; } .consigne-grid .consigne-cap { margin: 0; flex: 1; align-self: stretch; display: flex; align-items: center; padding: 0 18px; font-size: 20px; } }
.consigne-sign { background: var(--surface); border: 2px solid var(--ink); padding: 26px 26px 0; text-align: center; max-width: 260px; }
.consigne-sign img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; }
.consigne-cap { margin: 22px -26px 0; background: var(--iso-blue); color: #FFFFFF; font: 800 22px/1 var(--font-head); text-transform: uppercase; letter-spacing: .16em; padding: 14px 10px; }
.consigne-body > p { font-size: 18px; color: var(--ink-2); max-width: 780px; }
.checklist { list-style: none; margin: 26px 0 0; padding: 0; border-top: 2px solid var(--ink); max-width: 820px; }
.checklist li { position: relative; padding: 16px 0 16px 46px; border-bottom: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 17px; width: 26px; height: 26px; background: var(--iso-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center / 18px no-repeat; }
.checklist strong { font-weight: 600; }

/* ---------- Repères réglementaires ---------- */
.reperes { background: var(--surface); border-top: 2px solid var(--ink); }
.reperes .sec-head p { font-size: 15px; }
.reperes-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .reperes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; } }
.reperes-text h3 { font-size: 24px; margin: 0 0 8px; padding-top: 16px; border-top: 2px solid var(--ink); }
.reperes-text h3 ~ h3 { margin-top: 28px; }
.reperes-text p { margin: 0; color: var(--ink-2); }
.table-cap { font: 700 16px/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; background: var(--accent); display: inline-block; padding: 8px 12px 7px; margin: 0; }
.table-src { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.reperes-table .table-wrap { margin: 0; }
.reperes-table td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border-bottom: 2px solid var(--ink); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 14px; white-space: normal !important; }
  .table-stack td::before { content: attr(data-label); font: 700 13px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 2px; }
  .table-stack td:first-child { background: var(--ink) !important; color: #FFFFFF; font: 700 18px/1.2 var(--font-head); text-transform: uppercase; }
  .table-stack td:first-child::before { color: var(--accent); }
  .table-stack tbody tr:nth-child(even) td:not(:first-child) { background: #F7F5F0; }
}

/* ---------- Bandeau diagnostic ---------- */
.diag-band { background: var(--accent); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.diag-in { display: grid; gap: 22px; padding-top: 44px; padding-bottom: 44px; align-items: center; }
@media (min-width: 900px) { .diag-in { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 34px; } }
.diag-in img { width: 88px; height: 88px; }
.diag-txt h2 { font-size: clamp(30px, 3.6vw, 44px) !important; margin: 0 0 8px !important; }
.diag-txt p:last-child { margin: 0; max-width: 640px; }
.diag-band .kicker { color: var(--ink); }
.diag-band .kicker::before { background: var(--ink); }
.diag-band .btn { background: var(--ink); color: var(--accent); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(30, 34, 38, .35); justify-self: start; }
.diag-band .btn:hover { background: #000; }

/* ---------- Guides et cartes ---------- */
.guides .related { margin-top: 0; }
.related h2 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 28px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.card { border: 2px solid var(--ink); background: var(--surface); padding: 0 20px 22px; gap: 10px; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); transform: translate(-2px, -2px); }
.card-kind { align-self: flex-start; margin: 0 0 6px -20px; background: var(--ink); color: var(--accent); padding: 7px 12px 6px; font: 700 13px/1 var(--font-head); letter-spacing: .12em; }
.card-tool .card-kind { background: var(--accent); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.card-service .card-kind { background: var(--iso-blue); color: #FFFFFF; }
.card-title { font: 700 22px/1.08 var(--font-head); text-transform: uppercase; color: var(--ink); }
.card-desc { color: var(--muted); font-size: 15px; }

/* ---------- FAQ et sources ---------- */
.faq-sec { background: var(--bg); }
.faq-grid { display: grid; gap: 8px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; } .faq-grid .sources { margin-top: 0; } }
.faq-grid .faq { margin-top: 0; }
.faq h2, .sources h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 0 0 20px; }
.faq details { border: 2px solid var(--ink); border-radius: 0; margin-bottom: 12px; background: var(--surface); }
.faq summary { padding: 16px 60px 16px 18px; font-weight: 600; min-height: 56px; display: flex; align-items: center; line-height: 1.4; }
.faq summary::after { content: "+"; top: 50%; right: 12px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font: 800 24px/1 var(--font-head); border: 2px solid var(--ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.faq details > div { padding: 14px 18px 16px; color: var(--ink-2); }
.sources { font-size: 15px; }
.sources h2 { font-size: 26px !important; }
.sources ul { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.sources li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); position: relative; margin: 0; }
.sources li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 12px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------- Pages standard : en-tête ---------- */
.page-head { background: var(--anthracite); color: #F4F2EC; border-bottom: 0; padding: 36px 0 48px; position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: -40px; top: 50%; width: 260px; height: 230px; transform: translateY(-50%); background: url("/assets/picto-unites.svg") center / contain no-repeat; opacity: .1; pointer-events: none; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: #FFFFFF; font-size: clamp(36px, 4.8vw, 62px); line-height: .98; margin: 14px 0 14px; max-width: 980px; }
.page-head .lede { color: #D7DADD; font-size: 19px; max-width: 820px; }
.page-head .meta { color: #AEB4BA; font: 600 14px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.crumbs { font: 600 14px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .1em; color: #AEB4BA; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.kind-tool .page-head::after { background-image: url("/assets/picto-plan.svg"); }
.kind-service .page-head::after { background-image: url("/assets/consigne.svg"); }
@media (max-width: 720px) { .page-head::after { display: none; } .page-head { padding: 28px 0 36px; } .page-head .lede { font-size: 17px; } }
.crumbs { align-items: center; }
.crumbs a { padding: 12px 0; margin: -12px 0; }

/* ---------- Pages standard : contenu ---------- */
.content-wrap { padding-top: 48px; padding-bottom: 72px; }
@media (min-width: 1000px) { .content-grid.has-side { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } }
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(28px, 3.2vw, 38px); margin: 52px 0 14px; padding-top: 18px; border-top: 2px solid var(--ink); position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 64px; height: 6px; background: var(--accent); }
.prose h3 { font-size: 23px; margin: 30px 0 8px; }
.prose > p:first-child, .prose > .bref + p { font-size: 18px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { padding-left: 24px; position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 9px; height: 9px; background: var(--ink); }
.prose ol { padding-left: 0; list-style: none; counter-reset: etape; }
.prose ol > li { counter-increment: etape; padding-left: 40px; position: relative; margin: 10px 0; }
.prose ol > li::before { content: counter(etape); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--accent); border: 2px solid var(--ink); font: 800 15px/1 var(--font-head); }
.prose a:hover { background: var(--accent-soft); }
.prose blockquote { border-left: 6px solid var(--accent); background: var(--surface); border-radius: 0; }
.table-wrap { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); }
table { font-size: 15px; }
th { background: var(--ink); color: #FFFFFF; font: 700 15px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border-bottom: 0; }
td { border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) td { background: #F7F5F0; }
td:first-child { font-weight: 600; }

/* L'essentiel */
.bref { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); padding: 0; margin: 0 0 32px; box-shadow: 6px 6px 0 var(--accent); }
.bref-title { margin: 0; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #FFFFFF; font: 700 17px/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; padding: 12px 16px 11px; }
.bref-title::before { content: ""; width: 16px; height: 14px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.bref-title::after { content: ""; margin-left: auto; width: 60px; height: 14px; background: var(--chevron-fine); }
.bref ul { list-style: none; margin: 0; padding: 8px 18px 10px; }
.bref li { margin: 0; padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--line); font-size: 16px; }
.bref li:last-child { border-bottom: 0; }
.bref li::before { content: ""; position: absolute; left: 0; top: 15px; width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--accent); }

/* Encadré d'appel à l'action */
.cta-box { background: var(--anthracite); border: 0; border-radius: 0; padding: 22px 24px 22px 44px; margin: 36px 0; position: relative; gap: 18px; }
.cta-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: repeating-linear-gradient(-45deg, #FFC20E 0 8px, #1E2226 8px 16px); }
.cta-title { color: #FFFFFF; font: 700 22px/1.15 var(--font-head); text-transform: uppercase; letter-spacing: .02em; max-width: 460px; }
.cta-box .btn { box-shadow: 4px 4px 0 #000; }

/* Colonne latérale */
.sidebar { top: 104px; }
.side-box { border: 2px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 8px 8px 0 var(--accent); padding: 0 22px 24px; gap: 14px; }
.side-box::before { content: ""; display: block; height: 12px; margin: 0 -22px 8px; background: var(--chevron-fine); }
.side-title { font: 800 26px/1.02 var(--font-head); text-transform: uppercase; }
.side-text { font-size: 15px; }
.side-box .btn { width: 100%; }
.side-link { font: 700 15px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.side-link::before { content: ""; width: 0; height: 0; border-left: 8px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* Plaques de tarifs (page Tarifs) */
.plaques { display: grid; gap: 16px; margin: 26px 0 28px; }
.plaque { display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px; border: 2px solid var(--ink); background: var(--surface); }
.prose .plaque p { margin: 0; }
.prose .plaque .plaque-name { margin-bottom: 8px; }
.plaque-id { margin: 0; background: var(--ink); color: #FFFFFF; padding: 16px; font: 700 17px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .05em; display: flex; flex-direction: column; gap: 10px; }
.plaque-id span { background: var(--accent); color: var(--ink); align-self: flex-start; padding: 6px 9px 5px; font-weight: 800; font-size: 20px; }
.plaque-main { padding: 16px 18px; }
.plaque-main p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.plaque-main .plaque-name { font: 800 24px/1 var(--font-head); text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.plaque-prix { margin: 0; padding: 16px; border-left: 2px solid var(--ink); background: var(--accent-soft); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.plaque-prix strong { font: 800 27px/1 var(--font-head); text-transform: uppercase; }
.plaque-prix span { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
@media (max-width: 720px) {
  .plaque { grid-template-columns: 1fr; }
  .plaque-id { flex-direction: row; align-items: center; padding: 12px 14px; }
  .plaque-id span { align-self: center; }
  .plaque-prix { border-left: 0; border-top: 2px solid var(--ink); flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
}

/* ---------- Formulaire de devis ---------- */
.lead { background: var(--anthracite); color: #E6E4DE; border-top: 0; padding: 96px 0 88px; position: relative; scroll-margin-top: 84px; }
.lead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--chevron); }
.lead h2 { color: #FFFFFF; font-size: clamp(36px, 4.4vw, 56px); margin: 0 0 16px; }
.lead-intro { color: #D2D5D8; font-size: 18px; }
.lead-points { gap: 14px; margin-top: 22px; }
.lead-points li { padding-left: 36px; color: #E6E4DE; }
.lead-points li::before { top: 2px; width: 22px; height: 22px; border-radius: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231E2226' stroke-width='2.4'/%3E%3C/svg%3E") center / 16px no-repeat; }
.lead-body { position: relative; padding-top: 22px; }
.lead-body::before { content: ""; position: absolute; top: 0; left: 50%; width: 132px; height: 48px; margin-left: -66px; background: url("/assets/clip.svg") center / contain no-repeat; z-index: 2; }
.lead-form { background: var(--paper); color: var(--ink); border: 0; border-radius: 0; box-shadow: 10px 10px 0 var(--accent); padding: 40px 28px 28px; }
.field label { font: 700 15px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.field input, .field select, .field textarea, .tool input:not([type=radio]):not([type=checkbox]), .tool select { border: 2px solid #8E959C; border-radius: 0; min-height: 48px; background: #FFFFFF; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus, .tool input:not([type=radio]):not([type=checkbox]):focus, .tool select:focus { border-color: var(--ink); outline: 3px solid var(--accent); outline-offset: 0; box-shadow: none; }
.consent { color: var(--ink-2); }
.consent input { accent-color: var(--ink); width: 20px; height: 20px; }
.form-note { color: var(--muted); }
.form-success { background: var(--ok-bg); border: 2px solid var(--ok); border-radius: 0; color: var(--ink); box-shadow: 10px 10px 0 var(--accent); }
.success-title { font: 800 26px/1.1 var(--font-head); text-transform: uppercase; }
@media (max-width: 600px) { .lead { padding: 80px 0 64px; } .lead-form { padding: 36px 16px 20px; box-shadow: 6px 6px 0 var(--accent); } }

/* ---------- Outil : fiche de contrôle ---------- */
.tool { background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: 10px 10px 0 var(--accent); padding: 0 24px 26px; margin: 34px 0 40px; position: relative; }
.tool::before { content: ""; position: absolute; top: -26px; left: 50%; width: 132px; height: 48px; margin-left: -66px; background: url("/assets/clip.svg") center / contain no-repeat; }
.tool-head { margin: 0 -24px 24px; background: var(--ink); color: #FFFFFF; padding: 30px 24px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-head p { margin: 0; font: 700 16px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; }
.tool-head .tool-tag { background: var(--accent); color: var(--ink); padding: 5px 8px 4px; font-size: 14px; }
.tool .q { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px dashed #B9B5AA; }
.tool .q > label, .tool .q-label { font: 600 17px/1.4 var(--font-body); color: var(--ink); }
.tool .hint { color: var(--muted); }
.choices { gap: 10px; }
.choices label { border: 2px solid var(--ink); border-radius: 0; min-height: 44px; padding: 8px 18px 8px 12px; background: #FFFFFF; font: 700 17px/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.choices label:has(input:checked) { background: var(--accent); border-color: var(--ink); }
.choices label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.choices input[type=radio] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--ink); background: #FFFFFF; margin: 0; flex: none; display: grid; place-items: center; }
.choices input[type=radio]:checked { background: var(--ink); box-shadow: inset 0 0 0 3px #FFFFFF; }
.choices input[type=radio]:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #FFFFFF; }
.tool #du-go { margin-top: 4px; }
.result { border: 2px solid var(--ink); border-left-width: 14px; border-radius: 0; padding: 20px 22px; margin-top: 24px; background: var(--surface); }
.result.ok { background: var(--ok-bg); border-color: var(--ink); border-left-color: var(--iso-green); }
.result.warn { background: var(--warn-bg); border-color: var(--ink); border-left-color: var(--accent); }
.result.ko { background: var(--ko-bg); border-color: var(--ink); border-left-color: var(--iso-red); }
.result-title { font: 800 26px/1.08 var(--font-head); text-transform: uppercase; margin: 0 0 8px; }
.result-big { font: 800 44px/1 var(--font-head); text-transform: uppercase; color: var(--ink); margin: 6px 0 12px; }
.result ul { padding-left: 0; list-style: none; }
.result li { padding: 10px 0 10px 26px; border-top: 1px solid rgba(30, 34, 38, .15); position: relative; }
.result li::before { content: ""; position: absolute; left: 0; top: 16px; width: 12px; height: 11px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.result .btn { margin-top: 6px; }
@media (max-width: 600px) { .tool { padding: 0 16px 20px; box-shadow: 6px 6px 0 var(--accent); } .tool-head { margin: 0 -16px 20px; padding: 30px 16px 14px; } .result { border-left-width: 8px; padding: 16px; } .result-title { font-size: 23px; } .result-big { font-size: 38px; } }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 72px 0 32px; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--chevron-fine); }
.footer-grid { gap: 40px; }
.brand-footer .brand-name { font-size: 32px; }
.footer-text { font-size: 15px; line-height: 1.6; opacity: 1; max-width: 420px; }
.footer-title { font: 700 16px/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 16px; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; color: #EDEBE6; }
.site-footer a:hover { color: var(--accent); }
.disclaimer { border-top: 1px solid rgba(255, 255, 255, .14); opacity: 1; color: #A7ADB3; margin-top: 44px; line-height: 1.6; }
.disclaimer a { text-decoration: underline; text-decoration-color: var(--accent); }
.legal-links a { color: #CFD3D7; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .site-footer li a { min-height: 44px; } .site-footer { padding-top: 56px; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .card:hover { transform: none; }
}