/* Formation Serrurier Chantier — dossier technique / fiche de lot
   Angle : passerelle bâtiment → dépannage serrurerie. Lecture "documentaire", pas "landing page".
   Palette : ardoise #2F3A45 · ardoise sombre #1E262E · signal #C2410C · béton #E9E7E3 · blanc
   Parti pris structurel (à ne PAS reprendre des sites 01/02) :
     - en-tête = fiche technique tabulaire, sans photo de héros ni liste de bénéfices
     - rail latéral gauche numéroté et sticky en guise de sommaire
     - onglets + tableaux comparatifs comme dispositifs principaux
     - pas de bandeau de chiffres, pas de grille de cartes, pas de bandeau CTA pleine largeur */

:root {
  --ardoise: #2F3A45;
  --ardoise-sombre: #1E262E;
  --ardoise-clair: #46545F;
  --signal: #C2410C;
  --signal-fonce: #9A3609;
  --beton: #E9E7E3;
  --beton-fonce: #D8D5CF;
  --blanc: #FFFFFF;
  --encre: #1B222A;
  --gris: #5A6570;
  --vert: #15603F;
  --rouge: #9B1C1C;
  --titre: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --texte: "Barlow", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --gutter: clamp(16px, 4vw, 38px);
  --max: 1180px;
  --filet: 1px solid var(--beton-fonce);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--beton);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.62;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal-fonce); text-underline-offset: 3px; }
a:hover { color: var(--ardoise-sombre); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--ardoise-sombre); color: #fff; padding: .7rem 1.1rem; z-index: 200; font-weight: 600; }
.skip:focus { top: .5rem; color: #fff; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); letter-spacing: .02em; }
p { margin: 0 0 1.05em; }
.measure { max-width: 68ch; }

/* Référence de section, façon numéro de lot */
.ref { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-fonce); margin: 0 0 .7rem; }
.ref b { color: var(--ardoise); font-weight: 600; }

/* ---------- Bandeau ---------- */
.bandeau { background: var(--ardoise-sombre); color: #fff; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-align: center; padding: .55rem var(--gutter); margin: 0; }
.bandeau strong { color: #F7A072; font-weight: 600; }
.bandeau a { color: #fff; }

/* ---------- En-tête ---------- */
.masthead { background: var(--blanc); border-bottom: 3px solid var(--ardoise-sombre); position: sticky; top: 0; z-index: 100; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .45rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--encre); }
.brand img { width: 40px; height: 40px; }
.brand b { font-family: var(--titre); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; display: block; line-height: 1.05; }
.brand span { font-family: var(--mono); font-size: .66rem; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; }

.menu-toggle { display: none; font: inherit; font-weight: 600; background: var(--ardoise-sombre); color: #fff; border: 0; padding: .5rem 1rem; cursor: pointer; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.3rem; }
.nav a { font-family: var(--titre); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .03em; color: var(--ardoise); text-decoration: none; font-weight: 600; padding-block: .3rem; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--signal); }
.nav .nav-cta { background: var(--signal); color: #fff; padding: .5rem 1rem; border-bottom: 0; }
.nav .nav-cta:hover { background: var(--ardoise-sombre); color: #fff; }

@media (max-width: 920px) {
  .js .menu-toggle { display: inline-block; }
  .js .nav { width: 100%; display: none; }
  .js .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-top: var(--filet); }
  .nav a { display: block; padding: .75rem 0; border-bottom: 0; }
  .nav .nav-cta { text-align: center; margin-top: .5rem; }
}

/* ---------- Fil d'Ariane ---------- */
.crumbs { font-family: var(--mono); font-size: .76rem; padding-block: .9rem 0; color: var(--gris); letter-spacing: .04em; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "→"; margin-right: .4rem; }
.crumbs a { color: var(--gris); }

/* ---------- Sections ---------- */
.bloc { padding-block: clamp(2.2rem, 5vw, 3.8rem); border-top: var(--filet); }
.bloc--blanc { background: var(--blanc); }
.bloc--ardoise { background: var(--ardoise-sombre); color: #D5DDE4; border-top-color: var(--ardoise-sombre); }
.bloc--ardoise h2, .bloc--ardoise h3 { color: #fff; }
.bloc--ardoise .ref { color: #F7A072; }
.bloc--ardoise .ref b { color: #9FB0BE; }
.bloc--ardoise a { color: #F7A072; }

/* ---------- EN-TÊTE FICHE TECHNIQUE (remplace le hero photo) ---------- */
.fiche-tete { background: var(--ardoise-sombre); color: #D5DDE4; padding-block: clamp(2rem, 4.5vw, 3.2rem); }
.fiche-tete h1 { color: #fff; margin-bottom: .45em; }
.fiche-tete__intro { max-width: 60ch; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.fiche-tete__grille { display: grid; gap: 1.8rem; }
@media (min-width: 900px) { .fiche-tete__grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 2.8rem; align-items: start; } }

/* tableau "fiche d'identité" — la signature visuelle du site 03 */
.fiche-id { border: 2px solid var(--signal); background: #171F26; }
.fiche-id caption { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: var(--signal); color: #fff; padding: .5rem .7rem; text-align: left; }
.fiche-id table { width: 100%; border-collapse: collapse; }
.fiche-id th, .fiche-id td { text-align: left; padding: .6rem .8rem; border-top: 1px solid #2E3A45; font-size: .95rem; vertical-align: top; }
.fiche-id th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #9FB0BE; font-weight: 400; width: 42%; }
.fiche-id td { color: #fff; font-weight: 600; }
.fiche-id td .gros { font-family: var(--titre); font-size: 1.9rem; line-height: 1; display: block; color: #F7A072; }
.fiche-id tr:first-child th, .fiche-id tr:first-child td { border-top: 0; }
.fiche-id__pied { padding: .85rem; border-top: 1px solid #2E3A45; }
.fiche-id__pied .btn { width: 100%; }

.tete-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.tete-note { font-family: var(--mono); font-size: .78rem; color: #9FB0BE; margin-top: 1rem; line-height: 1.5; }

/* ---------- RAIL LATÉRAL NUMÉROTÉ (sommaire sticky) ---------- */
.avec-rail { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .avec-rail { grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; align-items: start; } }
.rail { font-family: var(--mono); font-size: .78rem; }
@media (min-width: 1000px) { .rail { position: sticky; top: 5rem; } }
.rail p { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin: 0 0 .6rem; }
.rail ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rail li { counter-increment: r; border-top: var(--filet); }
.rail li:last-child { border-bottom: var(--filet); }
.rail a { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; padding: .6rem 0; text-decoration: none; color: var(--ardoise); }
.rail a::before { content: counter(r, decimal-leading-zero); color: var(--signal-fonce); font-weight: 600; }
.rail a:hover { color: var(--encre); }
.rail a:hover::before { color: var(--encre); }

/* ---------- Tableaux (dispositif central du site) ---------- */
.tableau-wrap { overflow-x: auto; margin-top: 1.5rem; border: var(--filet); background: var(--blanc); }
table.data { border-collapse: collapse; width: 100%; min-width: 560px; }
table.data caption { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: .7rem .85rem; background: var(--ardoise-sombre); color: #fff; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: .75rem .85rem; border-top: var(--filet); }
table.data thead th { font-family: var(--titre); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .03em; background: var(--beton); border-top: 0; }
table.data tbody th { font-weight: 600; width: 30%; }
table.data td.oui { color: var(--vert); font-weight: 600; }
table.data td.non { color: var(--rouge); font-weight: 600; }

/* ---------- Onglets ---------- */
.onglets__liste { display: flex; flex-wrap: wrap; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; border-bottom: 3px solid var(--ardoise-sombre); }
.onglets__liste [role="tab"] {
  font: inherit; font-family: var(--titre); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .03em; font-weight: 600;
  background: var(--beton-fonce); color: var(--ardoise); border: 0; border-right: 1px solid var(--beton);
  padding: .65rem 1.1rem; cursor: pointer;
}
.onglets__liste [role="tab"][aria-selected="true"] { background: var(--ardoise-sombre); color: #fff; }
.onglets__liste [role="tab"]:hover { background: var(--ardoise-clair); color: #fff; }
[role="tabpanel"] { background: var(--blanc); border: var(--filet); border-top: 0; padding: clamp(1.1rem, 3vw, 1.8rem); }
[role="tabpanel"] > :last-child { margin-bottom: 0; }
.js [role="tabpanel"][hidden] { display: none; }
/* sans JS : tous les panneaux visibles, chacun précédé de son titre */
html:not(.js) .onglets__liste { display: none; }
html:not(.js) [role="tabpanel"] { border-top: var(--filet); margin-top: 1.2rem; }

/* ---------- Listes techniques ---------- */
.puces { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.puces li { border-top: var(--filet); padding: .65rem 0 .65rem 1.7rem; position: relative; }
.puces li::before { content: "—"; position: absolute; left: 0; color: var(--signal-fonce); font-weight: 600; }
.puces li:last-child { border-bottom: var(--filet); }

.bloc--ardoise .puces li { border-color: #2E3A45; }
.bloc--ardoise .puces li::before { color: #F7A072; }

/* ---------- Encadré d'avertissement (bande de signalisation) ---------- */
.avertissement { background: var(--blanc); border: var(--filet); border-left: 8px solid var(--signal); padding: clamp(1.2rem, 3.5vw, 2rem); }
.avertissement h2 { margin-top: 0; }
.avertissement .measure { max-width: 88ch; }
.avertissement ul { padding-left: 1.15rem; }
.avertissement li { margin-bottom: .45rem; }
.bloc--ardoise .avertissement { background: #171F26; border-color: #2E3A45; border-left-color: var(--signal); }

/* ---------- Phases (lecture horizontale, pas de liste numérotée verticale) ---------- */
.phases { display: grid; gap: 0; margin-top: 1.5rem; border: var(--filet); background: var(--blanc); }
@media (min-width: 860px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase { padding: 1.3rem; border-top: var(--filet); }
.phase:first-child { border-top: 0; }
@media (min-width: 860px) { .phase { border-top: 0; border-left: var(--filet); } .phase:first-child { border-left: 0; } }
.phase__num { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-fonce); margin: 0 0 .5rem; }
.phase h3 { margin-bottom: .4rem; }
.phase p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { margin-top: 1.5rem; border: var(--filet); background: var(--blanc); }
.faq details { border-top: var(--filet); }
.faq details:first-child { border-top: 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 1rem 2.8rem 1rem 1.1rem; position: relative;
  font-family: var(--titre); text-transform: uppercase; font-weight: 600; font-size: clamp(1.02rem, 1.7vw, 1.18rem); letter-spacing: .02em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--beton); }
.faq summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--signal-fonce); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary h2, .faq summary h3 { display: inline; font: inherit; margin: 0; text-transform: inherit; }
.faq .reponse { padding: 0 1.1rem 1.15rem; max-width: 74ch; }
.faq .reponse p:last-child { margin-bottom: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; background: var(--signal); color: #fff; text-decoration: none;
  font-family: var(--titre); text-transform: uppercase; font-weight: 600; font-size: 1.08rem; letter-spacing: .04em;
  padding: .75rem 1.5rem; border: 2px solid var(--signal); text-align: center; cursor: pointer;
}
.btn:hover { background: var(--signal-fonce); border-color: var(--signal-fonce); color: #fff; }
.btn--ligne { background: transparent; color: #fff; border-color: #fff; }
.btn--ligne:hover { background: #fff; color: var(--ardoise-sombre); }
.btn--vide { background: transparent; color: var(--ardoise-sombre); border-color: var(--ardoise-sombre); }
.btn--vide:hover { background: var(--ardoise-sombre); color: #fff; }

/* ---------- Images (toujours légendées, façon planche technique) ---------- */
.planche { margin: 1.5rem 0 0; border: var(--filet); background: var(--blanc); padding: .5rem; }
.planche img { width: 100%; }
.planche figcaption { font-family: var(--mono); font-size: .74rem; color: var(--gris); padding: .5rem .2rem 0; letter-spacing: .03em; }
.duo-planche { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .duo-planche { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }

/* ---------- Pied de section : renvoi ---------- */
.renvoi { margin-top: 1.6rem; padding-top: 1rem; border-top: 3px solid var(--ardoise-sombre); font-family: var(--mono); font-size: .82rem; }
.renvoi a { font-weight: 600; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1rem; background: var(--blanc); border: var(--filet); border-top: 4px solid var(--signal); padding: clamp(1.1rem, 3.5vw, 1.8rem); }
.champ label { display: block; font-family: var(--titre); text-transform: uppercase; font-weight: 600; letter-spacing: .03em; margin-bottom: .3rem; }
.champ .req { color: var(--rouge); }
.champ input, .champ textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--beton);
  border: 1px solid var(--gris); border-radius: 0; padding: .72rem .85rem;
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--signal); outline-offset: 1px; background: #fff; }
.form small { color: var(--gris); }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pied de page ---------- */
.footer { background: var(--ardoise-sombre); color: #A8B6C2; padding-block: 2.4rem 1.2rem; font-size: .9rem; border-top: 6px solid var(--signal); }
.footer__grid { display: grid; gap: 1.8rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.footer p strong, .footer .footer__brand { color: #fff; }
.footer__brand { font-family: var(--titre); text-transform: uppercase; font-size: 1.3rem; font-weight: 600; margin-bottom: .4rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .35rem; }
.footer a { color: #A8B6C2; }
.footer a:hover { color: #fff; }
.footer__mention { border-top: 1px solid #2E3A45; margin-top: 1.7rem; padding-top: 1rem; color: #8695A3; font-family: var(--mono); font-size: .76rem; line-height: 1.6; }

/* Mentions légales, CGV et pied de page légal */
.legal { max-width: 72ch; margin-top: 2rem; }
.legal section + section { margin-top: 2.4rem; }
.legal h2 { font-size: 1.35rem; padding-bottom: .45rem; margin: 0 0 1rem; border-bottom: 2px solid var(--signal-fonce); }
.legal h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.legal p { margin: 0 0 .9rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal a { overflow-wrap: anywhere; }
.pied-legal { margin-top: 1rem; font-size: .88rem; }
.pied-legal p { margin: 0 0 .35rem; }
.pied-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* Champ piège anti-robot (botcheck) */
.piege { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Notification d'envoi : bon de chantier, coin bas gauche ---------- */
.bon { position: fixed; z-index: 1000; left: var(--gutter); bottom: var(--gutter); width: min(24rem, calc(100% - 2 * var(--gutter))); background: var(--blanc); color: var(--encre); border: 2px solid var(--ardoise-sombre); box-shadow: 6px 6px 0 var(--signal); }
.bon:focus { outline: 3px solid var(--signal); outline-offset: 3px; }
.bon__entete { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem .8rem; background: var(--ardoise-sombre); color: var(--beton); font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.bon__entete span:last-child { color: #F5A06B; }
.bon__corps { padding: .9rem .9rem .3rem; border-bottom: 2px dashed var(--beton-fonce); }
.bon__titre { font-family: var(--titre); font-size: 1.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .35rem; }
.bon__corps p:last-child { margin: 0 0 .7rem; font-size: .95rem; }
.bon__fermer { display: block; width: 100%; font-family: var(--titre); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--beton); color: var(--encre); border: 0; padding: .6rem; cursor: pointer; }
.bon__fermer:hover { background: var(--signal); color: var(--blanc); }
@media (prefers-reduced-motion: no-preference) { .bon:not([hidden]) { animation: bon-glisse .4s cubic-bezier(.2, .8, .3, 1); } }
@keyframes bon-glisse { from { opacity: 0; transform: translateX(-110%); } to { opacity: 1; transform: none; } }
[data-notif][hidden] { display: none !important; }