:root{--papier:#f4f4f0;--encre:#1c1e22;--bleu:#1f3a93;--rouge:#b3372e;--gris:#5b5e63;--regle:#c9c9c2;
--disp:"Big Shoulders Display",sans-serif;--txt:"Overpass",sans-serif;--mono:"Overpass Mono",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--txt);background:var(--papier);color:var(--encre);line-height:1.65;font-size:.99rem}
a{color:var(--bleu)}
img{max-width:100%;display:block;filter:grayscale(.25) contrast(1.02)}
.cadre{width:min(1140px,94%);margin-inline:auto}

/* barre d'outils */
header.outils{background:var(--encre);color:var(--papier)}
header.outils .cadre{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;flex-wrap:wrap}
.matricule{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--papier)}
.matricule img{width:42px;height:42px;background:var(--papier)}
.matricule b{font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.05;display:block}
.matricule span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:#aab3c8}
.horodatage{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:#aab3c8}
/* onglets de classeur */
nav.onglets{background:var(--papier);border-bottom:2px solid var(--encre)}
nav.onglets .cadre{display:flex;gap:4px;flex-wrap:wrap;padding-top:.55rem}
nav.onglets a{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;
 text-decoration:none;color:var(--encre);background:#e7e7e0;border:1px solid var(--regle);border-bottom:none;
 padding:.5rem 1rem .42rem;border-radius:5px 5px 0 0;position:relative;top:2px}
nav.onglets a:hover{background:#dedfd6}
nav.onglets a.ouvert{background:var(--papier);border-color:var(--encre);border-bottom:2px solid var(--papier);color:var(--bleu)}

/* registre */
section.dossier{padding:3.2rem 0}
.cote{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--rouge);text-transform:uppercase}
h1.rubrique,h2.rubrique{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:.98;color:var(--encre);font-size:clamp(2.1rem,5.4vw,4rem);margin:.35rem 0 1.1rem}
h2.rubrique{font-size:clamp(1.5rem,3.4vw,2.3rem)}
p.note{margin-bottom:1rem;max-width:72ch;color:#33363b}
p.note a{font-weight:600}

/* fiches */
.classeur{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:1.6rem}
.fiche{border:1px solid var(--encre);background:#fff;padding:1.2rem 1.1rem;position:relative;transition:transform .12s}
.fiche:hover{transform:translateY(-3px)}
.fiche::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--bleu)}
.fiche.rge::after{background:var(--rouge)}
.fiche .no{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--gris)}
.fiche h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.25rem;margin:.3rem 0 .45rem;letter-spacing:.03em}
.fiche p{font-size:.9rem;color:#3c3f45;margin:0}
.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* tampon / objet */
.piece{border:2px solid var(--encre);background:#fff;padding:2rem 1.8rem;position:relative;margin-top:1.4rem}
.piece::before{content:"PIÈCE VERSÉE AU DOSSIER";position:absolute;top:-11px;left:16px;background:var(--papier);font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;padding:0 .6rem;color:var(--gris)}
.piece blockquote{font-size:1.04rem;line-height:1.8;color:var(--encre)}
.piece .tampon{display:inline-block;margin-top:1.2rem;border:2px solid var(--rouge);color:var(--rouge);font-family:var(--mono);
 font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.45rem .8rem;transform:rotate(-2deg)}
.avis{font-family:var(--mono);font-size:.78rem;color:var(--gris);margin-top:.9rem}

/* chronologie */
.chrono{border-left:2px solid var(--encre);margin:1.8rem 0 0 6px;padding-left:1.6rem;display:grid;gap:1.3rem}
.jalon{position:relative}
.jalon::before{content:"";position:absolute;left:calc(-1.6rem - 7px);top:.35rem;width:12px;height:12px;background:var(--papier);border:2px solid var(--bleu)}
.jalon.r::before{border-color:var(--rouge)}
.jalon .an{font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.04em}
.jalon p{font-size:.92rem;color:#3c3f45;max-width:64ch}

/* photos pièces jointes */
figure.pj{border:1px solid var(--encre);background:#fff;padding:8px 8px 0;margin:0}
figure.pj figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding:.6rem 2px}
.releve{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--regle);border-bottom:1px solid var(--regle);padding:1.1rem 0;margin-top:1.8rem}
.releve div b{font-family:var(--disp);font-size:2rem;color:var(--bleu);display:block;line-height:1}
.releve div span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* boutons index */
.renvoi{display:inline-block;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;
 background:var(--bleu);color:#fff;text-decoration:none;padding:.65rem 1.2rem;border:1px solid var(--bleu)}
.renvoi:hover{background:var(--encre);border-color:var(--encre)}
.renvoi.blanc{background:transparent;color:var(--encre);border-color:var(--encre)}
.renvoi.blanc:hover{background:var(--encre);color:#fff}

/* formulaire bordereau */
form.bordereau{max-width:600px;border:1px solid var(--encre);background:#fff;padding:1.6rem}
.case{margin-bottom:1rem}
.case label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:.3rem}
.case input,.case textarea,.case select{width:100%;border:1px solid var(--regle);background:var(--papier);padding:.65rem .7rem;font-family:var(--txt);font-size:.96rem}
.case input:focus,.case textarea:focus{outline:2px solid var(--bleu)}
#form-ok{display:none;margin-top:1rem;border:1px solid var(--bleu);border-left:6px solid var(--bleu);background:#eef1fa;padding:.9rem 1rem;color:#1d3270;font-weight:600}
.plan{border:1px solid var(--encre);margin-top:1rem}
.plan iframe{display:block;width:100%;height:360px;border:0}

/* pied cartouche */
footer.cartouche{border-top:2px solid var(--encre);margin-top:3rem;background:#fff}
footer.cartouche .cadre{padding:1.6rem 0}
footer.cartouche .l{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--regle);font-size:.88rem;align-items:baseline}
footer.cartouche .l b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em}
footer.cartouche .l span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--gris);text-align:right}
footer.cartouche nav{display:flex;gap:1.1rem;flex-wrap:wrap;padding-top:.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:880px){.c4,.c6,.c8{grid-column:span 12}.releve{gap:1.4rem}}