/* ============================================================
   MECATOOLBOX — design système "dessin industriel"  (ind. C)
   ============================================================ */
:root{
  --papier:#FBFBF9;
  --grille:rgba(26,32,44,0.055);
  --encre:#1B1F24;
  --encre-2:#4A5158;
  --trait:#C9CCC8;
  --verif:#C8102E;
  --verif-pale:#FBEAED;
  --graphite:#EFEFEA;
  --ok:#1E6B3C;
  --ok-pale:#E7F2EB;
  --etude:#8A6D00;
  --etude-pale:#FBF4DC;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} }

body{
  font-family:'Barlow',sans-serif;color:var(--encre);
  background-color:var(--papier);
  background-image:
    linear-gradient(var(--grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size:8px 8px;
  min-height:100vh;font-size:16px;line-height:1.5;
}
.cadre{max-width:1080px;margin:0 auto;padding:0 18px;}
.cadre-etroit{max-width:780px;margin:0 auto;padding:0 18px;}

/* ---------- cartouche (en-tête) ---------- */
header{border-bottom:2px solid var(--encre);background:var(--papier);}
.cartouche{display:grid;grid-template-columns:1fr auto;border-left:2px solid var(--encre);border-right:2px solid var(--encre);}
.cartouche-titre{padding:22px 20px 16px;border-right:1px solid var(--trait);}
.cartouche-titre .h1{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:38px;
  letter-spacing:.06em;line-height:1;text-transform:uppercase;color:var(--encre);
  text-decoration:none;display:inline-block;
}
.cartouche-titre .h1 .barre{color:var(--verif);}
.cartouche-titre p{margin-top:7px;color:var(--encre-2);font-size:14.5px;max-width:54ch;}
.cartouche-cases{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));font-family:'IBM Plex Mono',monospace;}
.case{border-left:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:8px 12px;min-width:0;}
.case:nth-last-child(-n+2){border-bottom:none;}
.case .lbl{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);}
.case .val{font-size:12.5px;font-weight:600;}
.case .val.rouge{color:var(--verif);}
@media(max-width:600px){
  .cartouche{grid-template-columns:1fr;}
  .cartouche-titre{border-right:none;border-bottom:1px solid var(--trait);}
  .cartouche-titre .h1{font-size:30px;}
  .cartouche-cases{grid-template-columns:repeat(4,1fr);}
  .case{border-bottom:none;border-top:1px solid var(--trait);}
}

/* ---------- navigation ---------- */
nav.onglets-nav{border-bottom:1px solid var(--encre);background:var(--papier);position:sticky;top:0;z-index:20;}
.onglets{display:flex;overflow-x:auto;border-left:2px solid var(--encre);border-right:2px solid var(--encre);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.onglets::-webkit-scrollbar{display:none;}
.onglet{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:12px 18px;border:none;background:transparent;color:var(--encre-2);
  border-right:1px solid var(--trait);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;
}
.onglet:hover{color:var(--encre);background:var(--graphite);}
.onglet[aria-selected="true"],.onglet.actif{color:var(--papier);background:var(--encre);}
.onglet:focus-visible{outline:2px solid var(--verif);outline-offset:-2px;}

main{padding:34px 0 80px;}

/* ---------- hub : planches ---------- */
.section-titre{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--encre-2);
  display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.section-titre::after{content:"";flex:1;height:1px;background:var(--encre);}
.planches{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;}
.planche{
  position:relative;border:1px solid var(--encre);background:var(--papier);
  padding:20px 18px 16px;cursor:pointer;text-align:left;width:100%;
  transition:box-shadow .15s ease, transform .15s ease;
  text-decoration:none;color:var(--encre);display:block;
}
.planche:hover{box-shadow:5px 5px 0 var(--encre);transform:translate(-2px,-2px);}
.planche:focus-visible{outline:2px solid var(--verif);outline-offset:3px;}
.planche::before,.planche::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;}
.planche::before{top:5px;left:5px;border-top:1.5px solid var(--encre);border-left:1.5px solid var(--encre);}
.planche::after{bottom:5px;right:5px;border-bottom:1.5px solid var(--encre);border-right:1.5px solid var(--encre);}
.planche .ref{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--encre-2);}
.planche h2,.planche h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;text-transform:uppercase;letter-spacing:.03em;margin:5px 0;}
.planche p{font-size:14px;color:var(--encre-2);min-height:42px;}
.planche .etat{
  display:inline-block;margin-top:12px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border:1px solid;
}
.etat.dispo{color:var(--ok);border-color:var(--ok);}
.etat.bientot{color:var(--encre-2);border-color:var(--trait);background:var(--graphite);}
.planche.inactive{cursor:default;opacity:.75;pointer-events:none;}
.planche.hachures{background-image:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(26,32,44,0.05) 7px,rgba(26,32,44,0.05) 8px);}

/* ---------- feuille de calcul ---------- */
.retour{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;
  background:none;border:1px solid var(--encre);padding:8px 14px;cursor:pointer;
  margin-bottom:22px;color:var(--encre);text-decoration:none;display:inline-block;
}
.retour:hover{background:var(--encre);color:var(--papier);}
.retour:focus-visible{outline:2px solid var(--verif);outline-offset:2px;}

.feuille{border:1.5px solid var(--encre);background:var(--papier);}
.feuille-tete{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--encre);padding:15px 20px;
}
.feuille-tete h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:27px;text-transform:uppercase;letter-spacing:.04em;}
.feuille-tete .ref{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--encre-2);letter-spacing:.1em;}
.feuille-corps{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);}
@media(max-width:880px){.feuille-corps{grid-template-columns:1fr;}}
.colonne-saisie{border-right:1px solid var(--trait);padding:20px;}
@media(max-width:880px){.colonne-saisie{border-right:none;border-bottom:1px solid var(--trait);}}
.colonne-resultats{padding:20px;}

/* ---------- contrôles tactiles ---------- */
.bloc{margin-bottom:20px;}
.bloc .etiquette{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:8px;
}
.bloc .etiquette em{font-style:normal;color:var(--verif);}
.pastilles{display:flex;flex-wrap:wrap;gap:7px;}
.pastilles.defilant{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pastilles.defilant::-webkit-scrollbar{display:none;}
.pastille{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  color:var(--encre);background:var(--papier);border:1px solid var(--encre);
  padding:8px 12px;cursor:pointer;white-space:nowrap;min-height:40px;
  transition:all .12s ease;
}
.pastille:hover{background:var(--graphite);}
.pastille[aria-pressed="true"]{color:var(--papier);background:var(--encre);font-weight:700;box-shadow:2px 2px 0 var(--verif);}
.pastille:focus-visible{outline:2px solid var(--verif);outline-offset:2px;}
.pastille small{display:block;font-family:'Barlow',sans-serif;font-size:10px;opacity:.8;font-weight:400;margin-top:1px;}
.segments{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--encre);overflow:hidden;background:var(--papier);}
.segment{
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:500;
  color:var(--encre);background:transparent;border:none;border-right:1px solid var(--trait);
  padding:10px 4px;cursor:pointer;transition:all .12s ease;min-height:46px;
}
.segment:last-child{border-right:none;}
.segment:hover{background:var(--graphite);}
.segment[aria-pressed="true"]{color:var(--papier);background:var(--encre);font-weight:700;}
.segment:focus-visible{outline:2px solid var(--verif);outline-offset:-2px;}
.segment small{display:block;font-family:'Barlow',sans-serif;font-size:10px;opacity:.8;font-weight:400;}
.stepper{display:flex;align-items:stretch;border:1px solid var(--encre);background:var(--papier);}
.stepper button{
  width:42px;border:none;background:transparent;color:var(--encre-2);
  font-size:19px;cursor:pointer;transition:all .12s ease;flex:0 0 auto;
}
.stepper button:hover{color:var(--verif);background:var(--graphite);}
.stepper button:focus-visible{outline:2px solid var(--verif);outline-offset:-2px;}
.stepper input{
  flex:1;min-width:0;text-align:center;border:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:var(--encre);
  padding:10px 2px;appearance:textfield;-moz-appearance:textfield;
  border-left:1px solid var(--trait);border-right:1px solid var(--trait);
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;}
.stepper input:focus-visible{outline:none;background:var(--verif-pale);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.aide{font-size:12.5px;color:var(--encre-2);margin-top:6px;line-height:1.5;}

/* ---------- schéma interactif ---------- */
.schema-boite{border:1px solid var(--encre);background:var(--papier);padding:12px 8px 4px;margin-bottom:18px;position:relative;}
.schema-boite::before,.schema-boite::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;}
.schema-boite::before{top:4px;left:4px;border-top:1.5px solid var(--encre);border-left:1.5px solid var(--encre);}
.schema-boite::after{bottom:4px;right:4px;border-bottom:1.5px solid var(--encre);border-right:1.5px solid var(--encre);}
.schema-boite svg{display:block;width:100%;height:auto;max-height:320px;margin:0 auto;}
.schema-legende{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:6px 0;}
.schema-legende span{font-size:11px;color:var(--encre-2);display:flex;align-items:center;gap:6px;}
.schema-legende i{width:10px;height:10px;background:var(--verif-pale);border:1px solid var(--verif);}
.zone .surbrillance{opacity:0;transition:opacity .3s ease;}
.zone.actif .surbrillance{opacity:1;}
.svg-txt{font-family:'IBM Plex Mono',monospace;fill:var(--encre-2);font-size:9.5px;}
.svg-txt.vif{fill:var(--verif);font-weight:700;font-size:11px;}
.svg-txt.fonce{fill:var(--encre);font-weight:600;}

/* ---------- cotes (résultats) ---------- */
.res-titre{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--verif);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.res-titre::after{content:"";flex:1;height:1px;background:var(--verif);opacity:.4;}
.cote{margin-bottom:20px;}
.cote .cote-nom{font-size:13px;color:var(--encre-2);margin-bottom:4px;}
.cote-ligne{display:flex;align-items:center;}
.cote-fleche{flex:0 0 24px;height:1.5px;background:var(--encre);position:relative;}
.cote-fleche::before{content:"";position:absolute;top:50%;width:9px;height:9px;border-top:1.5px solid var(--encre);}
.cote-fleche.g::before{left:0;border-left:1.5px solid var(--encre);transform:translateY(-50%) rotate(-45deg);transform-origin:top left;}
.cote-fleche.d::before{right:0;border-right:1.5px solid var(--encre);transform:translateY(-50%) rotate(45deg);transform-origin:top right;}
.cote-val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:25px;padding:2px 13px;white-space:nowrap;}
.cote-val small{font-size:14px;font-weight:400;color:var(--encre-2);margin-left:4px;}
.cote.principale .cote-val{color:var(--verif);font-size:32px;font-weight:700;}
.cote.principale .cote-fleche{background:var(--verif);}
.cote.principale .cote-fleche::before{border-color:var(--verif);}
.duo-cotes{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:480px){.duo-cotes{grid-template-columns:1fr;}}
.detail{border-top:1px dashed var(--trait);margin-top:4px;padding-top:12px;}
.detail-ligne{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;color:var(--encre-2);}
.detail-ligne .v{font-family:'IBM Plex Mono',monospace;color:var(--encre);}

/* ---------- tampon disclaimer ---------- */
.tampon{
  margin-top:20px;border:1.5px solid var(--verif);color:var(--verif);
  padding:10px 14px;font-size:12.5px;background:var(--verif-pale);
  transform:rotate(-.5deg);max-width:52ch;
}
.tampon b{font-family:'Barlow Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:13px;}
.tampon a{color:var(--verif);}

/* ---------- contenu pédagogique (SEO) ---------- */
.pedagogie{margin-top:34px;}
.pedagogie h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;
  text-transform:uppercase;letter-spacing:.05em;margin:26px 0 10px;
  display:flex;align-items:center;gap:12px;
}
.pedagogie h2::after{content:"";flex:1;height:1px;background:var(--trait);}
.pedagogie p{margin-bottom:12px;font-size:15px;max-width:72ch;}
.pedagogie .formule{
  font-family:'IBM Plex Mono',monospace;font-size:14px;background:var(--graphite);
  border:1px solid var(--trait);padding:10px 14px;margin:10px 0 14px;overflow-x:auto;
}
.pedagogie table{border-collapse:collapse;margin:10px 0 16px;font-size:14px;width:100%;max-width:560px;}
.pedagogie th,.pedagogie td{border:1px solid var(--trait);padding:7px 11px;text-align:left;}
.pedagogie th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;background:var(--graphite);}
.pedagogie td:last-child{font-family:'IBM Plex Mono',monospace;}

/* ---------- registre des demandes ---------- */
.composeur{border:1.5px solid var(--encre);background:var(--papier);margin-bottom:26px;position:relative;}
.composeur::before{content:"";position:absolute;top:4px;left:4px;width:11px;height:11px;border-top:1.5px solid var(--encre);border-left:1.5px solid var(--encre);}
.composeur-tete{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre-2);
  border-bottom:1px solid var(--trait);padding:10px 16px;
}
.composeur-corps{padding:14px 16px 16px;}
.composeur textarea{
  width:100%;min-height:74px;resize:vertical;
  font-family:'Barlow',sans-serif;font-size:15px;color:var(--encre);
  background:transparent;border:none;line-height:1.5;
}
.composeur textarea:focus-visible{outline:none;}
.composeur-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed var(--trait);padding-top:12px;margin-top:6px;flex-wrap:wrap;}
.pseudo{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--encre);
  background:transparent;border:none;border-bottom:1px solid var(--trait);
  padding:4px 2px;width:150px;
}
.pseudo:focus-visible{outline:none;border-bottom-color:var(--verif);}
.btn-poster{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--papier);background:var(--encre);border:1px solid var(--encre);
  padding:9px 22px;cursor:pointer;transition:all .15s ease;
}
.btn-poster:hover{background:var(--verif);border-color:var(--verif);}
.btn-poster:disabled{opacity:.4;cursor:default;background:var(--encre);}
.filtres{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;scrollbar-width:none;}
.filtres::-webkit-scrollbar{display:none;}
.filtre{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--encre);background:var(--papier);border:1px solid var(--encre);
  padding:6px 12px;cursor:pointer;white-space:nowrap;text-transform:uppercase;
}
.filtre:hover{background:var(--graphite);}
.filtre[aria-pressed="true"]{color:var(--papier);background:var(--encre);}
.fiche{border:1px solid var(--encre);background:var(--papier);margin-bottom:18px;position:relative;}
.fiche::before{content:"";position:absolute;top:4px;left:4px;width:11px;height:11px;border-top:1.5px solid var(--encre);border-left:1.5px solid var(--encre);z-index:1;}
.fiche-tete{
  display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--trait);padding:9px 16px;
}
.fiche-ref{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--encre-2);}
.fiche-ref b{color:var(--encre);font-weight:600;}
.statut{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px;border:1px solid;transform:rotate(-1deg);
}
.statut.etude{color:var(--etude);border-color:var(--etude);background:var(--etude-pale);}
.statut.accepte,.statut.realise{color:var(--ok);border-color:var(--ok);background:var(--ok-pale);}
.statut.refuse{color:var(--verif);border-color:var(--verif);background:var(--verif-pale);}
.statut.nouveau{color:var(--encre-2);border-color:var(--trait);background:var(--graphite);}
.fiche-corps{padding:13px 16px 5px;}
.fiche-auteur{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--encre-2);margin-bottom:5px;}
.fiche-auteur b{color:var(--encre);font-weight:600;}
.fiche-texte{font-size:15px;line-height:1.55;}
.fiche-actions{display:flex;gap:6px;padding:10px 16px 13px;flex-wrap:wrap;}
.action{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--encre-2);
  background:transparent;border:1px solid var(--trait);padding:5px 11px;cursor:pointer;
  transition:all .12s ease;
}
.action:hover{border-color:var(--encre);color:var(--encre);}
.action.vote[aria-pressed="true"]{color:var(--verif);border-color:var(--verif);background:var(--verif-pale);font-weight:600;}
.reponses{border-top:1px dashed var(--trait);margin:0 16px;padding:10px 0 4px;display:none;}
.fiche.ouverte .reponses{display:block;}
.reponse{display:flex;gap:10px;padding:8px 0;}
.reponse .fil{flex:0 0 2px;background:var(--trait);margin-left:6px;}
.reponse-contenu{flex:1;padding-bottom:2px;}
.reponse-auteur{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--encre-2);}
.reponse-auteur b{color:var(--encre);font-weight:600;}
.reponse-auteur b.equipe{color:var(--verif);}
.reponse-texte{font-size:14px;margin-top:2px;}
.repondre{display:flex;gap:8px;padding:8px 0 12px;}
.repondre input{
  flex:1;font-family:'Barlow',sans-serif;font-size:14px;color:var(--encre);
  background:transparent;border:1px solid var(--trait);padding:8px 11px;
}
.repondre input:focus-visible{outline:none;border-color:var(--encre);}
.repondre button{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--encre);background:transparent;border:1px solid var(--encre);
  padding:0 14px;cursor:pointer;text-transform:uppercase;
}
.repondre button:hover{background:var(--encre);color:var(--papier);}
.bandeau-demo{
  border:1.5px solid var(--etude);background:var(--etude-pale);color:var(--etude);
  padding:10px 14px;font-size:12.5px;margin-bottom:22px;transform:rotate(-.4deg);
}
.bandeau-demo b{font-family:'Barlow Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- pages légales ---------- */
.legal h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px;}
.legal h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.05em;margin:24px 0 8px;}
.legal p,.legal li{font-size:14.5px;margin-bottom:10px;max-width:76ch;color:var(--encre);}
.legal ul{padding-left:22px;margin-bottom:12px;}
.legal .surligne{background:var(--etude-pale);border:1px dashed var(--etude);padding:2px 6px;font-family:'IBM Plex Mono',monospace;font-size:13px;}

/* ---------- pied de page ---------- */
footer{border-top:2px solid var(--encre);padding:20px 0 34px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--encre-2);letter-spacing:.05em;}
footer .cadre{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
footer a{color:var(--encre-2);}
footer a:hover{color:var(--verif);}