/* Le Coffre-Fort, maquette v7. Base choisie par Numan Sahnou sur la page des versions : la v5, « les chemises posées »
   (fond crème à grain, chemises ambre, tampons, titres gras), en mieux fait. Le premier écran est un grand dépôt,
   suivi d'un parcours guidé ; la sécurité est visible ; tout doit être clair pour l'utilisateur. */
:root {
  --vert: #0A4640; --vert-2: #00534C; --encre-t: #1F7A5A; --ambre: #F8B334; --ambre-h: #FBC657; --ambre-f: #E2A01E; --ambre-ff: #C98A12; --ambre-pale: #FDF1D6; --miel: #FFF8E6;
  --creme: #F4EFE3; --kraft: #E6DDC6; --kraft-2: #D9D1BD; --kraft-t: #6B6450; --papier: #FFFEFA;
  --encre: #26302E; --encre-2: #5F6B68; --encre-3: #98A09D; --filet: #ECE8DD; --filet-2: #F3F0E8; --blanc: #fff;
  --rouge: #B3401A; --rouge-pale: #FBE7DD;
  --titre: 'Sora', system-ui, sans-serif; --sans: 'Open Sans', system-ui, sans-serif;
  --doux: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 14.5px/1.55 var(--sans); color: var(--encre); background-color: var(--creme); -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .24  0 0 0 .09 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }
h1, h2, h3 { margin: 0; color: var(--vert); font-family: var(--titre); letter-spacing: -0.025em; }
h1 { font-size: 34px; font-weight: 800; line-height: 1.08; } h2 { font-size: 19px; font-weight: 700; } h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; } a { color: var(--vert-2); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.muet { color: var(--encre-2); } .petit { font-size: 13px; } .mention { font-size: 12px; color: var(--encre-3); }
.sur { font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); display: block; }
.fic { flex: none; display: block; } .ico { width: 16px; height: 16px; flex: none; }
code { font: 600 12px/1.5 ui-monospace, Consolas, monospace; color: var(--vert-2); word-break: break-all; }

/* ------------------------------------------------------------ haut de page, pied */
.haut { display: flex; align-items: center; gap: 30px; padding: 20px 44px 12px; max-width: 1240px; margin: 0 auto; }
.marque { display: flex; gap: 11px; align-items: center; text-decoration: none; } .marque svg { width: 38px; height: 38px; }
.marque b { font: 800 19px/1 var(--titre); color: var(--vert); letter-spacing: -0.03em; white-space: nowrap; }
.haut nav { display: flex; gap: 26px; }
.haut nav a { padding: 8px 0; font: 600 14.5px/1 var(--titre); color: var(--encre-2); text-decoration: none; white-space: nowrap; position: relative; display: inline-flex; gap: 7px; align-items: center; }
.haut nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--ambre); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--doux); }
.haut nav a:hover, .haut nav a.on { color: var(--vert); } .haut nav a.on::after, .haut nav a:hover::after { transform: none; }
.haut nav .nb { background: var(--vert); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 10px; }
.haut .s { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--encre-2); }
.verrou { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; background: var(--papier); border: 1.5px solid #CFE3DA; color: var(--encre-t); font-weight: 600; padding: 7px 12px; border-radius: 30px; }
.verrou .ico { width: 14px; height: 14px; } .verrou b { color: var(--vert); font-variant-numeric: tabular-nums; } .verrou span { color: var(--encre-2); font-weight: 400; }
.moi { display: inline-flex; gap: 10px; align-items: center; text-align: right; line-height: 1.25; white-space: nowrap; }
.moi b { display: block; font: 700 13px/1.2 var(--titre); color: var(--vert); }
.moi button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--kraft-2); display: grid; place-items: center; color: var(--vert); transition: background .15s; } .moi button:hover { background: var(--kraft); }
.page { max-width: 1240px; margin: 0 auto; padding: 18px 44px 120px; }
.page > * { animation: entree .45s var(--doux) both; } .page > *:nth-child(2) { animation-delay: .06s; } .page > *:nth-child(3) { animation-delay: .12s; } .page > *:nth-child(n+4) { animation-delay: .18s; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .entete p { margin-top: 8px; color: var(--encre-2); max-width: 720px; font-size: 15.5px; }
.ariane { font-size: 12.5px; color: var(--encre-3); margin-bottom: 10px; } .ariane a { color: var(--encre-2); text-decoration: none; } .ariane a:hover { text-decoration: underline; }
.pied { max-width: 1240px; margin: 0 auto; padding: 0 44px 70px; font-size: 12.5px; color: var(--encre-3); display: flex; gap: 22px; flex-wrap: wrap; } .pied span:first-child { margin-right: auto; }

/* ------------------------------------------------------------ boutons, tampons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 9px; font: 700 13px/1 var(--titre); white-space: nowrap; text-decoration: none; transition: background .12s, transform .12s, box-shadow .12s; }
.btn.p, .btn.v { background: var(--vert); color: #fff; box-shadow: 0 3px 0 #052E2A; } .btn.p:hover, .btn.v:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #052E2A; } .btn.p:active, .btn.v:active { transform: translateY(2px); box-shadow: 0 1px 0 #052E2A; }
.btn.s { color: var(--vert); box-shadow: inset 0 0 0 1.5px var(--kraft-2); background: var(--papier); } .btn.s:hover { box-shadow: inset 0 0 0 1.5px var(--vert); }
.btn.l { color: var(--vert); padding: 11px 4px; text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn.t { padding: 9px 13px; } .btn.g { padding: 15px 22px; font-size: 15px; } .btn[disabled] { opacity: .4; pointer-events: none; }
.tampon { display: inline-block; border: 2px solid currentColor; border-radius: 5px; padding: 4px 9px 3px; font: 800 11px/1.15 var(--titre); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-t); transform: rotate(-2.5deg); opacity: .88; white-space: nowrap; }
.tampon small { display: block; font: 600 9.5px/1.2 var(--sans); letter-spacing: .04em; opacity: .85; }
.tampon.plein { background: var(--vert); color: #fff; border-color: var(--vert); opacity: 1; transform: rotate(-1.5deg); } .tampon.rouge { color: var(--rouge); } .tampon.gris { color: var(--encre-3); transform: none; }
.attente { font: 700 12px/1 var(--titre); color: var(--ambre-ff); display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; } .attente::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 4px rgba(248,179,52,.25); }
.info { border-radius: 10px; background: #E9F3EF; padding: 12px 16px; font-size: 13.5px; color: var(--vert-2); }
.info.alerte { background: var(--rouge-pale); color: #6E2A10; } .info.alerte b { color: var(--rouge); } .info.ambre { background: var(--ambre-pale); color: #6B4700; }

/* ------------------------------------------------------------ premier écran : le grand dépôt */
.depose { text-align: center; padding: 6px 0 0; }
.depose .bonjour { font: 600 14.5px/1 var(--titre); color: var(--encre-2); margin-bottom: 12px; }
.depose h1 { font-size: 46px; letter-spacing: -0.035em; }
.depose h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--ambre) 62%, var(--ambre) 94%, transparent 94%); padding: 0 3px; }
.depose .suite-p { font-size: 17px; color: var(--encre-2); margin: 12px auto 26px; max-width: 640px; line-height: 1.45; } .depose .suite-p b { color: var(--vert); }
.grande { max-width: 900px; margin: 0 auto; text-align: left; cursor: pointer; }
.grande .lang { display: inline-block; position: relative; background: var(--ambre); border-radius: 14px 14px 0 0; padding: 12px 24px 10px; font: 700 13.5px/1 var(--titre); color: var(--vert); }
.grande .lang::after { content: ''; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--ambre) 14px); }
.grande .corps-c { background: linear-gradient(180deg, var(--ambre), #F5AE2C); border-radius: 0 20px 20px 20px; padding: 14px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 30px 50px -18px rgba(140,95,5,.5); transition: transform .25s var(--doux), box-shadow .25s; }
.grande .fente-g { border: 2.5px dashed #E6C878; background: var(--papier); border-radius: 10px; padding: 46px 30px 40px; text-align: center; transition: background .2s, border-color .2s; }
.grande:hover .corps-c, .grande.dessus .corps-c, body.glisse .grande .corps-c { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 38px 60px -18px rgba(140,95,5,.55); }
.grande:hover .fente-g { border-color: var(--ambre-ff); } .grande.dessus .fente-g, body.glisse .grande .fente-g { border-color: var(--ambre-ff); background: var(--miel); border-style: solid; }
.eventail { display: flex; justify-content: center; height: 86px; margin-bottom: 18px; } .eventail .fic { margin: 0 -8px; transition: transform .35s var(--doux); }
.eventail .fic:nth-child(1) { transform: rotate(-14deg) translateY(10px); } .eventail .fic:nth-child(2) { transform: translateY(-2px); } .eventail .fic:nth-child(3) { transform: rotate(14deg) translateY(10px); }
.grande:hover .fic:nth-child(1), .grande.dessus .fic:nth-child(1), body.glisse .grande .fic:nth-child(1) { transform: rotate(-24deg) translate(-16px, 6px); }
.grande:hover .fic:nth-child(3), .grande.dessus .fic:nth-child(3), body.glisse .grande .fic:nth-child(3) { transform: rotate(24deg) translate(16px, 6px); }
.grande:hover .fic:nth-child(2), .grande.dessus .fic:nth-child(2), body.glisse .grande .fic:nth-child(2) { transform: translateY(-12px); }
.fente-g h2 { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; } .fente-g p { color: var(--encre-2); margin: 6px 0 20px; font-size: 15px; }
.fente-g .formats { margin-top: 18px; font-size: 12.5px; color: var(--encre-3); }
.parcours { list-style: none; margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 980px; text-align: left; counter-reset: p; }
.parcours li { position: relative; padding: 0 18px 0 0; font-size: 13px; color: var(--encre-2); counter-increment: p; }
.parcours li::before { content: counter(p); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--papier); border: 2px solid var(--ambre); font: 800 14px/1 var(--titre); color: var(--vert); margin-bottom: 10px; position: relative; z-index: 1; }
.parcours li:not(:last-child)::after { content: ''; position: absolute; left: 32px; right: 0; top: 15px; height: 2px; background: repeating-linear-gradient(90deg, var(--kraft-2) 0 6px, transparent 6px 11px); }
.parcours b { display: block; font: 700 14.5px/1.3 var(--titre); color: var(--vert); letter-spacing: -0.01em; margin-bottom: 2px; }
.surete-l { display: flex; justify-content: center; gap: 12px; margin: 34px 0 0; flex-wrap: wrap; }
.surete-l span { display: inline-flex; gap: 8px; align-items: center; font: 600 12.5px/1 var(--titre); color: var(--encre-t); background: var(--papier); border: 1.5px solid #CFE3DA; padding: 9px 14px; border-radius: 30px; } .surete-l .ico { width: 14px; height: 14px; }
.titre-r { display: flex; align-items: baseline; justify-content: space-between; margin: 46px 0 14px; } .titre-r span { font-size: 13px; color: var(--encre-3); } .titre-r a { font: 700 13px/1 var(--titre); }

/* ------------------------------------------------------------ la chemise ouverte */
.onglets-c { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; padding-left: 2px; }
.ong { position: relative; padding: 12px 22px 13px; border-radius: 13px 13px 0 0; background: var(--kraft); color: var(--kraft-t); font: 700 14px/1.2 var(--titre); text-decoration: none; transition: background .15s, padding .2s var(--doux); cursor: pointer; }
.ong small { display: block; font: 400 12px/1.3 var(--sans); opacity: .85; margin-top: 3px; }
.ong:hover { background: #EBD9A8; padding-top: 15px; } .ong.on { background: var(--ambre); color: var(--vert); padding-top: 17px; z-index: 1; }
.ong.on::after { content: ''; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--ambre) 14px); }
.ong.arch { background: var(--kraft-2); opacity: .8; }
body.glisse a.ong:not(.on) { background: #F3CF7A; color: var(--vert); } a.ong.dessus { background: var(--ambre) !important; padding-top: 19px; }
.chemise { background: linear-gradient(180deg, var(--ambre), #F5AE2C); border-radius: 0 18px 18px 18px; padding: 14px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 24px 40px -14px rgba(140,95,5,.45); position: relative; isolation: isolate; }
.feuille { background: var(--papier); border-radius: 8px; position: relative; box-shadow: 0 1px 3px rgba(80,55,0,.22); display: flow-root; }
.feuille::before { content: ''; position: absolute; inset: 0; background: var(--papier); border-radius: 8px; transform: rotate(-.45deg) translateY(-5px); box-shadow: 0 1px 3px rgba(80,55,0,.2); z-index: -1; }
.fiche { display: flex; gap: 40px; padding: 20px 26px 18px; border-bottom: 1px solid var(--filet); margin: 0; flex-wrap: wrap; align-items: center; }
.fiche div { display: flex; flex-direction: column; gap: 4px; } .fiche dt { font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); } .fiche dd { margin: 0; font: 700 14.5px/1.3 var(--titre); color: var(--vert); }
.fiche .droite { margin-left: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); padding: 14px 14px 10px; white-space: nowrap; }
td { padding: 14px; border-top: 1px solid var(--filet-2); vertical-align: middle; }
td:first-child, th:first-child { padding-left: 26px; } td:last-child, th:last-child { padding-right: 26px; } td.n, th.n { text-align: right; }
.piece { display: flex; gap: 14px; align-items: center; } .piece b { display: block; font: 700 15px/1.3 var(--titre); color: var(--vert); letter-spacing: -0.01em; } .piece span { font-size: 12.5px; color: var(--encre-3); display: block; }
.piece .motif { color: var(--rouge); margin-top: 2px; font-weight: 600; }
.fente { width: 44px; height: 52px; border: 2px dashed #DCC58C; border-radius: 7px; display: grid !important; place-items: center; background: var(--miel); flex: none; transition: all .2s var(--doux); } .fente .fic { opacity: .4; }
tr.rang:hover .fente { border-color: var(--ambre-ff); background: var(--ambre-pale); } tr.rang:hover .fente .fic { opacity: .9; }
.ech b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ech small { font-size: 12px; color: var(--encre-3); white-space: nowrap; } .ech.presse small { color: var(--ambre-ff); font-weight: 700; } .ech.retard small { color: var(--rouge); font-weight: 700; }
tr.rang { transition: background .15s; } tr.rang:hover td { background: #FCFAF3; }
body.glisse tr.rang td { opacity: .35; } body.glisse tr.rang.cible td { opacity: 1; background: var(--miel); }
body.glisse tr.rang.cible .fente { border-color: var(--ambre-ff); border-style: solid; background: var(--ambre-pale); animation: appel .8s infinite alternate var(--doux); } @keyframes appel { to { transform: scale(1.12); } }
body.glisse tr.rang.dessus td { background: var(--ambre-pale); }
tr.rang.refus td { background: var(--rouge-pale); } tr.rang.neuf .tampon { animation: frappe .5s cubic-bezier(.3, 1.6, .5, 1) .15s both; } tr.rang.neuf .piece .fic { animation: glisse-in .5s var(--doux) both; }
@keyframes frappe { from { transform: rotate(-14deg) scale(2.6); opacity: 0; } } @keyframes glisse-in { from { transform: translateY(-22px) rotate(-8deg); opacity: 0; } }
.depot { margin: 6px 26px 24px; border: 2px dashed #DCC58C; background: var(--miel); border-radius: 10px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; color: var(--encre-2); font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s; }
.depot:hover, .depot.dessus, body.glisse .depot { border-color: var(--ambre-ff); background: var(--ambre-pale); }
.depot b { color: var(--vert); display: block; font: 700 15px/1.3 var(--titre); } .depot .fics { display: flex; } .depot .fics .fic + .fic { margin-left: -9px; }
.depot.grand { margin: 0; padding: 44px 40px; justify-content: center; border-radius: 14px; border-width: 2.5px; } .depot.grand b { font-size: 20px; margin-bottom: 4px; } .depot.grand > span:last-child { max-width: 520px; }
.cadre { background: var(--papier); border-radius: 12px; box-shadow: 0 1px 3px rgba(80,55,0,.16), 0 14px 30px -14px rgba(80,55,0,.22); overflow: hidden; }
.cadre > header { padding: 18px 26px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deux { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; } .pile > * + * { margin-top: 24px; }
.jauge { width: 90px; height: 6px; background: var(--filet); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; } .jauge i { display: block; height: 100%; background: var(--encre-t); border-radius: 3px; }
details.aide { border-top: 1px solid var(--filet-2); } details.aide:first-child { border-top: 0; }
details.aide summary { padding: 17px 26px; font: 700 15px/1.3 var(--titre); color: var(--vert); cursor: pointer; } details.aide div { padding: 0 26px 18px 42px; color: var(--encre-2); font-size: 14px; max-width: 800px; }
.dossier-ico { width: 30px; height: 25px; flex: none; }

/* ------------------------------------------------------------ fichiers d'essai */
.bureau { position: fixed; left: 0; right: 0; bottom: 0; background: #26302E; color: #C9D1CE; padding: 8px 20px; display: flex; align-items: center; gap: 10px; font-size: 12px; z-index: 45; flex-wrap: wrap; }
.bureau > span { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 10.5px; margin-right: 6px; }
.puce { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 6px; background: #fff; color: var(--encre); font-weight: 600; cursor: grab; user-select: none; white-space: nowrap; transition: transform .15s; }
.puce:hover { transform: translateY(-3px) rotate(-1.5deg); } .puce:active { cursor: grabbing; } .puce small { color: var(--encre-3); font-weight: 400; margin-left: 4px; }

/* ------------------------------------------------------------ le parcours de dépôt */
.fond-fen { position: fixed; inset: 0; background: rgba(28,34,30,.6); backdrop-filter: blur(2px); z-index: 70; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .2s; } .fond-fen.vu { opacity: 1; }
.fen { width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; transform: translateY(18px) scale(.98); transition: transform .3s var(--doux); } .fond-fen.vu .fen { transform: none; }
.fen > header { align-self: flex-start; background: var(--ambre); border-radius: 13px 13px 0 0; padding: 13px 22px 10px; display: flex; align-items: center; gap: 18px; position: relative; }
.fen > header::after { content: ''; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--ambre) 14px); }
.fen > header h2 { font-size: 16px; } .fen .fermer { font-size: 20px; color: var(--vert); line-height: 1; opacity: .65; } .fen .fermer:hover { opacity: 1; }
.fen .dedans { background: linear-gradient(180deg, var(--ambre), #F5AE2C); border-radius: 0 18px 18px 18px; padding: 12px; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.fen .papier { background: var(--papier); border-radius: 8px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.temps { display: grid; grid-template-columns: repeat(4, 1fr); font: 600 12.5px/1.2 var(--titre); color: var(--encre-3); padding: 18px 24px 16px; border-bottom: 1px solid var(--filet); }
.temps span { display: flex; gap: 8px; align-items: center; position: relative; }
.temps span:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--filet); margin: 0 10px 0 4px; border-radius: 2px; }
.temps i { width: 26px; height: 26px; border-radius: 50%; background: var(--filet-2); display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none; }
.temps .on { color: var(--vert); } .temps .on i { background: var(--ambre); color: var(--vert); box-shadow: 0 0 0 4px rgba(248,179,52,.28); } .temps .fait { color: var(--encre-t); } .temps .fait i { background: var(--encre-t); color: #fff; } .temps .fait::after { background: var(--encre-t) !important; }
.fen .corps { padding: 22px 24px; overflow: auto; }
.fen .corps > h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 4px; } .fen .corps > .chapo { color: var(--encre-2); margin-bottom: 16px; }
.fen footer { padding: 14px 24px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--filet-2); }
.fen footer .chiffre { font: 600 12px/1 var(--titre); color: var(--encre-t); display: inline-flex; gap: 7px; align-items: center; } .fen footer .chiffre .ico { width: 14px; height: 14px; }
.en-main { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--creme); border-radius: 10px; margin-bottom: 10px; }
.en-main b { display: block; font: 700 15px/1.3 var(--titre); color: var(--vert); word-break: break-all; } .en-main span { font-size: 12.5px; color: var(--encre-3); }
.en-main .vers { margin-left: auto; text-align: right; font-size: 12px; color: var(--encre-3); flex: none; max-width: 240px; } .en-main .vers b { font-size: 13.5px; }
.controles td { padding: 10px 10px; font-size: 13.5px; border-top: 0; border-bottom: 1px solid var(--filet-2); } .controles td:first-child { width: 30px; padding: 10px 0 10px 2px; } .controles td:last-child { color: var(--encre-2); padding-right: 2px; }
.controles tr { opacity: 0; transform: translateX(8px); transition: all .35s var(--doux); } .controles tr.vu { opacity: 1; transform: none; } .controles .ico { color: var(--encre-t); } .controles .al .ico { color: var(--rouge); } .controles b { font-weight: 700; color: var(--encre); }
.dl { display: grid; grid-template-columns: 150px 1fr; margin: 16px 0 0; font-size: 13.5px; }
.dl dt { padding: 8px 0; color: var(--encre-3); font-size: 12.5px; border-top: 1px solid var(--filet-2); } .dl dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--filet-2); font-weight: 600; }
.dl dt:first-of-type, .dl dt:first-of-type + dd { border-top: 0; }
.accuse { position: relative; } .accuse > header { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--vert); } .accuse > header svg { width: 44px; height: 44px; }
.accuse > header b { display: block; font: 800 20px/1.2 var(--titre); color: var(--vert); letter-spacing: -0.02em; } .accuse > header span { font-size: 12.5px; color: var(--encre-3); }
.accuse .dl { margin-top: 6px; }
.grand-tampon { position: absolute; right: 8px; top: 74px; border: 3.5px solid var(--encre-t); color: var(--encre-t); border-radius: 8px; padding: 8px 16px 6px; font: 800 24px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-9deg); opacity: .82; text-align: center; animation: frappe .55s cubic-bezier(.3, 1.6, .5, 1) .25s both; pointer-events: none; }
.grand-tampon small { display: block; font: 700 10.5px/1.4 var(--sans); letter-spacing: .08em; margin-top: 3px; }
.propositions { display: grid; gap: 8px; }
.propositions button { display: flex; align-items: center; gap: 14px; text-align: left; border-radius: 10px; padding: 13px 15px; box-shadow: inset 0 0 0 1.5px var(--filet); transition: all .15s; }
.propositions button:hover { box-shadow: inset 0 0 0 2px var(--ambre-ff); background: var(--miel); transform: translateX(4px); } .propositions b { display: block; font: 700 14.5px/1.3 var(--titre); color: var(--vert); } .propositions span span { font-size: 12.5px; color: var(--encre-3); display: block; }
.propositions .va { margin-left: auto; font: 700 12.5px/1 var(--titre); color: var(--vert); }

/* ------------------------------------------------------------ Conseil National */
.faits { display: flex; gap: 46px; margin-bottom: 26px; flex-wrap: wrap; } .faits div { border-left: 3px solid var(--ambre); padding-left: 14px; }
.faits b { display: block; font: 800 30px/1.05 var(--titre); color: var(--vert); letter-spacing: -0.03em; } .faits span { font-size: 13px; color: var(--encre-2); }
.grille td, .grille th { text-align: center; } .grille td:first-child, .grille th:first-child { text-align: left; }
.grille th .fic { margin: 0 auto 6px; } .grille td small { display: block; color: var(--encre-3); font-size: 12px; } .grille tbody tr { cursor: pointer; } .grille tbody tr:hover td { background: #FCFAF3; }
.ca { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; vertical-align: middle; font: 800 12px/1 var(--titre); } .ca .ico { width: 13px; height: 13px; }
.ca.lue { background: var(--vert); color: var(--ambre); } .ca.remise { color: var(--encre-t); box-shadow: inset 0 0 0 1.5px currentColor; } .ca.attendue { border: 1.5px dashed #DCC58C; background: var(--miel); }
.ca.corriger { background: #D9531E; color: #fff; } .ca.sans { color: var(--encre-3); font: 400 12px/1 var(--sans); width: auto; }
.filtres { display: flex; gap: 22px; margin-bottom: 14px; } .filtres button { padding: 6px 0; font: 600 14px/1 var(--titre); color: var(--encre-2); border-bottom: 3px solid transparent; }
.filtres button.on { color: var(--vert); border-bottom-color: var(--ambre); } .filtres em { font-style: normal; opacity: .55; margin-left: 6px; font-weight: 400; }
.legende { display: flex; gap: 18px; font-size: 12.5px; color: var(--encre-2); padding: 14px 26px; border-top: 1px solid var(--filet); flex-wrap: wrap; } .legende span { display: inline-flex; gap: 7px; align-items: center; }

/* ------------------------------------------------------------ connexion */
.connexion { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100vh; padding: 16px; gap: 16px; }
.vitrine { position: relative; overflow: hidden; border-radius: 22px; background: var(--vert); color: #fff; display: flex; flex-direction: column; padding: 34px 40px; min-height: 620px; }
.vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; animation: respire 24s ease-in-out infinite alternate; } @keyframes respire { to { transform: scale(1.06); } }
.vitrine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,45,41,.7) 0%, rgba(7,45,41,.1) 32%, rgba(7,45,41,.2) 55%, rgba(7,45,41,.95) 100%); }
.vitrine > * { position: relative; z-index: 2; } .vitrine > img { position: absolute; z-index: 0; }
.vitrine .marque b { color: #fff; font-size: 21px; }
.vitrine h1 { color: #fff; font-size: 44px; margin-top: auto; max-width: 520px; letter-spacing: -0.035em; } .vitrine h1 em { font-style: normal; color: var(--ambre); }
.vitrine p { color: rgba(255,255,255,.85); margin-top: 12px; max-width: 500px; font-size: 15.5px; }
.vitrine ul { list-style: none; padding: 18px 0 0; margin: 22px 0 0; display: flex; gap: 24px; font-size: 12.5px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.vitrine li { display: flex; gap: 8px; align-items: center; } .vitrine li .ico { color: var(--ambre); width: 14px; height: 14px; }
.formulaire { display: flex; flex-direction: column; padding: 24px 40px; align-items: center; }
.formulaire form { margin: auto 0; width: 100%; max-width: 430px; }
.formulaire .lang { display: inline-block; position: relative; background: var(--ambre); border-radius: 13px 13px 0 0; padding: 12px 22px 9px; font: 700 13px/1 var(--titre); color: var(--vert); }
.formulaire .lang::after { content: ''; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--ambre) 14px); }
.formulaire .dedans { background: linear-gradient(180deg, var(--ambre), #F5AE2C); border-radius: 0 18px 18px 18px; padding: 12px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), 0 26px 44px -14px rgba(140,95,5,.5); position: relative; isolation: isolate; }
.formulaire .papier { background: var(--papier); border-radius: 8px; padding: 28px 30px 30px; position: relative; box-shadow: 0 1px 3px rgba(80,55,0,.22); }
.formulaire .papier::before { content: ''; position: absolute; inset: 0; background: var(--papier); border-radius: 8px; transform: rotate(-.8deg) translateY(-6px); box-shadow: 0 1px 3px rgba(80,55,0,.2); z-index: -1; }
.formulaire h2 { font-size: 27px; font-weight: 800; margin-bottom: 6px; }
.champ { display: block; margin-top: 16px; } .champ > span { display: block; font: 700 12.5px/1 var(--titre); color: var(--encre-2); margin-bottom: 7px; }
.champ input { width: 100%; padding: 13px 14px; border-radius: 9px; border: 1.5px solid var(--kraft-2); font: inherit; font-size: 15px; outline: 0; background: #fff; transition: border .15s, box-shadow .15s; }
.champ input:focus, .code input:focus { border-color: var(--ambre-ff); box-shadow: 0 0 0 4px rgba(248,179,52,.28); }
.code { display: flex; gap: 8px; margin-top: 12px; } .code input { width: 100%; min-width: 0; padding: 13px 0; text-align: center; font: 800 22px/1 var(--titre); color: var(--vert); border-radius: 9px; border: 1.5px solid var(--kraft-2); outline: 0; background: #fff; }
.formulaire .btn { width: 100%; justify-content: center; margin-top: 22px; padding: 16px; font-size: 14.5px; }
.formulaire .info { margin-top: 20px; font-size: 13px; }
.formulaire .liens { margin-top: 22px; font-size: 12.5px; color: var(--encre-3); display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------ barre de la maquette, message bref */
.demo { position: fixed; right: 12px; bottom: 46px; background: #26302E; color: #C9D1CE; border-radius: 8px; padding: 6px 8px 6px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.demo > span { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 10.5px; color: var(--ambre); margin-right: 4px; }
.demo button { padding: 5px 9px; border-radius: 5px; font-weight: 600; } .demo button.on { background: var(--ambre); color: var(--vert); } .demo a { color: #C9D1CE; text-decoration: none; padding: 0 4px; } .demo a:hover { color: #fff; }
.toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); background: var(--vert); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s; z-index: 95; max-width: 620px; pointer-events: none; } .toast.vu { opacity: 1; }
@media (max-width: 1100px) { .deux, .connexion { grid-template-columns: 1fr; } .parcours { grid-template-columns: 1fr 1fr; gap: 18px 0; } .haut { flex-wrap: wrap; } .haut .s { margin-left: 0; } .bureau { display: none; } .demo { bottom: 10px; } .depose h1 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------ états : un point et un mot, plus de tampons (retour de Numan) */
.statut { font: 700 12.5px/1 var(--titre); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--encre-2); }
.statut::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.statut.attendue { color: var(--ambre-ff); } .statut.attendue::before { background: var(--ambre); box-shadow: 0 0 0 4px rgba(248,179,52,.25); }
.statut.remise, .statut.lue { color: var(--encre-t); } .statut.corriger { color: var(--rouge); } .statut.ferme { color: var(--encre-3); }
.statut-s { display: block; font-size: 12px; color: var(--encre-3); margin: 3px 0 0 16px; }

/* ------------------------------------------------------------ v8 : compte utilisateur, historique, pied INGELINE */
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--ambre); color: var(--vert); display: grid; place-items: center; font: 800 12.5px/1 var(--titre); flex: none; }
.av.g { width: 44px; height: 44px; font-size: 15px; } .av.xl { width: 84px; height: 84px; font-size: 28px; margin: 0 auto 14px; box-shadow: 0 0 0 6px var(--ambre-pale); }
.av.p { width: 28px; height: 28px; font-size: 10.5px; } .av.cn { background: var(--vert); color: var(--ambre); }
.compte-z { position: relative; }
.compte-b { display: flex; gap: 10px; align-items: center; padding: 5px 10px 5px 5px; border-radius: 30px; background: var(--papier); border: 1.5px solid var(--kraft-2); text-align: left; transition: border-color .15s, box-shadow .15s; }
.compte-b:hover, .compte-b.on { border-color: var(--vert); } .compte-b .ico { color: var(--encre-3); width: 15px; height: 15px; }
.compte-b .qui { font-size: 12px; color: var(--encre-3); line-height: 1.25; white-space: nowrap; } .compte-b .qui b { display: block; font: 700 13px/1.2 var(--titre); color: var(--vert); }
.menu-c { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: var(--papier); border-radius: 14px; box-shadow: 0 2px 4px rgba(80,55,0,.12), 0 24px 50px -10px rgba(40,30,0,.35); padding: 8px; z-index: 50; animation: entree .2s var(--doux); }
.menu-c .tete { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; } .menu-c .tete b { display: block; font: 700 14.5px/1.3 var(--titre); color: var(--vert); } .menu-c .tete span { display: block; font-size: 12.5px; color: var(--encre-3); line-height: 1.35; }
.menu-c .gage { display: flex; gap: 8px; align-items: center; font: 600 12px/1 var(--titre); color: var(--encre-t); background: #E9F3EF; border-radius: 8px; padding: 9px 10px; margin: 0 2px 6px; } .menu-c .gage .ico { width: 14px; height: 14px; }
.menu-c a, .menu-c button { display: flex; gap: 11px; align-items: center; width: 100%; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--encre); font: 600 13.5px/1 var(--titre); }
.menu-c a:hover, .menu-c button:hover { background: var(--creme); } .menu-c a .ico, .menu-c button .ico { color: var(--encre-3); }
.menu-c button { border-top: 1px solid var(--filet); margin-top: 6px; padding-top: 14px; border-radius: 0 0 8px 8px; color: var(--rouge); } .menu-c button .ico { color: var(--rouge); }
.menu-c p { font-size: 11.5px; color: var(--encre-3); padding: 6px 10px 4px; }
.pied { align-items: center; } .opere { display: inline-flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--encre-3); } .opere img { height: 17px; width: auto; opacity: .75; display: block; }
.formulaire .opere { margin-top: 18px; }
.compte-g { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.profil { text-align: center; padding: 30px 26px 24px; } .profil h2 { font-size: 21px; font-weight: 800; } .profil > p { font-size: 13.5px; margin-top: 2px; } .profil .dl { text-align: left; grid-template-columns: 120px 1fr; margin-top: 20px; }
.corps-k { padding: 8px 26px 20px; font-size: 14px; } .corps-k .mention { margin-top: 12px; }
.hab { list-style: none; margin: 12px 0 0; padding: 0; } .hab li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--filet-2); font-size: 12.5px; color: var(--encre-3); }
.hab li > span:nth-child(2) b { display: block; font: 700 14px/1.3 var(--titre); color: var(--vert); } .hab .statut { margin-left: auto; font-size: 12px; }
.secu-l { list-style: none; margin: 0; padding: 4px 26px 12px; } .secu-l li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--filet-2); } .secu-l li:first-child { border-top: 0; }
.secu-l .rd { width: 38px; height: 38px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; color: var(--encre-2); flex: none; } .secu-l .rd.ok { background: #E9F3EF; color: var(--encre-t); }
.secu-l b { display: block; font: 700 14px/1.3 var(--titre); color: var(--vert); } .secu-l div span { font-size: 12.5px; color: var(--encre-3); } .secu-l .btn { margin-left: auto; }
.cadre > header .mention { text-align: right; max-width: 360px; } td .piece .ico { color: var(--encre-3); }
.resume-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 24px; background: var(--papier); border-radius: 12px; box-shadow: 0 1px 3px rgba(80,55,0,.16); }
.resume-h div { padding: 16px 24px; border-right: 1px solid var(--filet); } .resume-h div:last-child { border-right: 0; }
.resume-h b { display: block; font: 800 22px/1.2 var(--titre); color: var(--vert); letter-spacing: -0.02em; margin: 6px 0 2px; } .resume-h div > span:last-child { font-size: 12.5px; color: var(--encre-2); }
.fil-h { padding: 6px 26px 14px; } .fil-h .mois { font: 700 12px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); padding: 22px 0 6px; }
.fil-h ol { list-style: none; margin: 0; padding: 0; }
.fil-h li { display: grid; grid-template-columns: 92px 34px 1fr auto; gap: 16px; align-items: center; padding: 13px 0; position: relative; }
.fil-h li::before { content: ''; position: absolute; left: 124px; top: 0; bottom: 0; width: 2px; background: var(--filet); } .fil-h ol li:first-child::before { top: 50%; } .fil-h ol li:last-child::before { bottom: 50%; }
.fil-h time { text-align: right; font-size: 12.5px; color: var(--encre-3); line-height: 1.3; } .fil-h time b { display: block; font: 700 14px/1.2 var(--titre); color: var(--vert); }
.fil-h .pt { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--creme); color: var(--encre-2); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--papier); } .fil-h .pt .ico { width: 15px; height: 15px; }
.fil-h .t-depot .pt { background: var(--ambre); color: var(--vert); } .fil-h .t-consultation .pt { background: var(--vert); color: var(--ambre); } .fil-h .t-integration .pt { background: #E9F3EF; color: var(--encre-t); }
.fil-h .ev { display: flex; gap: 13px; align-items: center; min-width: 0; } .fil-h .ev b { display: block; font: 700 14.5px/1.3 var(--titre); color: var(--vert); letter-spacing: -0.01em; } .fil-h .ev span { font-size: 13px; color: var(--encre-2); }
.fil-h .par { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--encre-2); text-align: left; min-width: 250px; } .fil-h .par small { display: block; color: var(--encre-3); font-size: 11.5px; }
.fil-h li.t-consultation .ev { background: #EEF6F2; border-radius: 10px; padding: 8px 12px; margin: -8px -12px; }
@media (max-width: 1100px) { .compte-g, .resume-h { grid-template-columns: 1fr; } .fil-h li { grid-template-columns: 70px 34px 1fr; } .fil-h .par { grid-column: 3; min-width: 0; } .fil-h li::before { left: 102px; } .compte-b .qui { display: none; } }

.menu-c .tete .av { display: grid; font: 800 15px/1 var(--titre); color: var(--vert); }
.cadre > header .mention { max-width: 330px; line-height: 1.35; }

/* ------------------------------------------------------------ logo Cerfrance : en-tête, connexion, pied (outil interne au réseau) */
.haut { gap: 22px; } .haut img.cf { height: 24px; width: auto; padding-left: 20px; border-left: 1.5px solid var(--kraft-2); display: block; margin-left: -4px; }
.vitrine img.cf-v { position: absolute; z-index: 2; top: 36px; right: 40px; left: auto; bottom: auto; height: 30px; width: auto; inset-inline-start: auto; object-fit: contain; animation: none; }
.formulaire .reseau { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--encre-3); text-align: center; } .formulaire .reseau img { height: 34px; width: auto; }
.pied .cf-p { display: inline-flex; gap: 12px; align-items: center; } .pied .cf-p img { height: 18px; width: auto; opacity: .85; }
@media (max-width: 1250px) { .haut img.cf { display: none; } }
.haut nav { gap: 22px; }

/* ------------------------------------------------------------ en-tête : un seul bloc de marque, le mot CERFRANCE aligné sur « le coffre-fort » */
.haut .marque { gap: 10px; align-items: center; } .haut .marque svg { width: 34px; height: 34px; }
.haut .marque .sep { width: 1.5px; height: 26px; background: var(--kraft-2); margin: 0 8px 0 10px; flex: none; }
.haut img.cf { height: 36px; width: auto; display: block; padding: 0; border: 0; margin: 0; transform: translateY(-11px); }
.formulaire .reseau img { height: 40px; } .pied .cf-p img { height: 22px; transform: translateY(-5px); }
.haut nav { margin-left: 14px; }

/* ------------------------------------------------------------ en-tête compact : une seule marque, tout tient dans la largeur de la page */
.haut { gap: 28px; padding: 18px 44px 12px; } .haut .marque svg { width: 36px; height: 36px; } .haut nav { margin-left: 6px; gap: 24px; }
.haut .s { gap: 12px; } .compte-b { padding: 4px 10px 4px 4px; gap: 8px; } .compte-b .qui b { font-size: 13px; }
.pied { padding-top: 18px; border-top: 1px solid var(--kraft-2); margin-top: 10px; max-width: 1152px; padding-left: 0; padding-right: 0; }
.pied .cf-p img { height: 24px; transform: translateY(-5px); } .formulaire .reseau { margin-bottom: 8px; } .formulaire .reseau img { height: 44px; }

/* ============================================================ compléments de l'application (absents de la maquette) */
.demo, .bureau { display: none; }
.pied a { color: inherit; text-decoration: none; } .pied a:hover { text-decoration: underline; }
.filtres a { padding: 6px 0; font: 600 14px/1 var(--titre); color: var(--encre-2); border-bottom: 3px solid transparent; text-decoration: none; }
.filtres a.on { color: var(--vert); border-bottom-color: var(--ambre); }
.faits { margin-bottom: 22px; } .grille td b a { color: var(--vert); text-decoration: none; font: 700 14.5px/1.3 var(--titre); } .grille tbody tr[data-aller] { cursor: pointer; }
.champ input.code-u { text-align: center; font: 800 24px/1 var(--titre); letter-spacing: .3em; color: var(--vert); }
.qr { display: grid; place-items: center; margin: 16px 0 8px; } .qr svg { width: 190px; height: 190px; border-radius: 10px; background: #fff; }
.formulaire form a.btn { width: 100%; justify-content: center; margin-top: 20px; padding: 15px; }
.rouge { color: var(--rouge); font-weight: 700; }
.fil-p { list-style: none; margin: 0; padding: 6px 26px 16px; } .fil-p li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--filet-2); font-size: 13.5px; }
.fil-p li:first-child { border-top: 0; } .fil-p time { color: var(--encre-3); font-size: 12.5px; } .fil-p b { display: block; font: 700 14px/1.3 var(--titre); color: var(--vert); } .fil-p span { color: var(--encre-2); }
.secu-l li[hidden] { display: none; } .f-mdp { width: 100%; max-width: 380px; padding: 0 0 8px 52px; } .f-mdp .btn { margin-top: 16px; }
.barre-e { height: 6px; border-radius: 6px; background: var(--filet); overflow: hidden; margin-top: 18px; } .barre-e i { display: block; height: 100%; width: 40%; background: var(--ambre); border-radius: 6px; animation: envoi 1.1s ease-in-out infinite; }
@keyframes envoi { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.erreur-p { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 30px; } .erreur-p .marque { margin-bottom: 18px; }
.document { padding: 34px 40px; max-width: 820px; } .document .accuse > header { position: relative; } .cf-doc { height: 34px; margin-left: auto; transform: translateY(-8px); }
.fen .accuse > header svg, .document .accuse > header svg { width: 44px; height: 44px; flex: none; }
@media print { body { background: #fff !important; } .haut, .pied, .sans-impression, .ariane { display: none !important; } .page { padding: 0; } .document { box-shadow: none; max-width: none; padding: 0; } }

/* ---- tableau de suivi : en-têtes sur deux lignes, première colonne large ; tableaux défilants sur petit écran */
.grille th { white-space: normal; max-width: 150px; line-height: 1.35; vertical-align: bottom; } .grille th:first-child, .grille td:first-child { min-width: 250px; }
.cadre { overflow-x: auto; }
@media (max-width: 1240px) { .pied { margin-left: 44px; margin-right: 44px; } }
@media (max-width: 700px) { .page { padding-left: 20px; padding-right: 20px; } .pied { margin-left: 20px; margin-right: 20px; } .haut { padding-left: 20px; padding-right: 20px; } }
.cadre .bloc { padding: 0 26px 18px; } .cadre .bloc .dl { margin-top: 6px; }
.legende span.ca { display: inline-grid; gap: 0; } .grille td.n, .cadre td time, .cadre table td a { white-space: nowrap; } .grille td.n { min-width: 150px; }
.cadre td .piece b { white-space: nowrap; }

/* code à scanner : noir sur blanc, marge réglementaire de quatre modules, jamais rogné ni arrondi */
.qr img { display: block; width: auto; height: auto; max-width: 100%; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--filet); }

/* applications d'authentification reconnues, au-dessus du code à scanner */
.applis { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.applis li { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; font: 600 11.5px/1.25 var(--sans); color: var(--encre-2); }
.applis img { width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--filet), 0 2px 5px rgba(80,55,0,.12); }

/* ------------------------------------------------------------ le mot de la marque : léger, seul « fort » est gras */
.marque .nom { font: 400 20px/1 var(--titre); color: var(--vert); letter-spacing: -0.025em; white-space: nowrap; } .marque .nom b { font: inherit; font-weight: 700; letter-spacing: inherit; color: inherit; }
.vitrine .marque .nom { color: #fff; font-size: 22px; } .vitrine .marque .nom b { color: var(--ambre); }
.haut nav { gap: 22px; }

/* ------------------------------------------------------------ dépôt libre : le lot dans la fenêtre */
.temps.n3 { grid-template-columns: repeat(3, 1fr); } .fen footer .boutons { display: flex; gap: 10px; }
.lot { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; border: 1px solid var(--filet); border-radius: 10px; }
.lot li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--filet-2); } .lot li:first-child { border-top: 0; }
.lot b { display: block; font: 700 14px/1.3 var(--titre); color: var(--vert); word-break: break-all; } .lot span { font-size: 12px; color: var(--encre-3); }
.lot em, .lot a { font: 700 12px/1.3 var(--titre); font-style: normal; color: var(--encre-3); display: inline-flex; gap: 6px; align-items: center; text-align: right; max-width: 270px; } .lot em .ico { width: 14px; height: 14px; flex: none; }
.lot .ok em { color: var(--encre-t); } .lot .non em { color: var(--rouge); } .lot .double em { color: var(--ambre-ff); } .lot .cours em { color: var(--vert); } .lot .non b { color: var(--encre-2); }
.lot a { color: var(--vert); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rangement { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .rangement .champ:only-child { grid-column: 1 / -1; } .rangement .mention { display: block; margin-top: 6px; }
.champ select { width: 100%; padding: 13px 14px; border-radius: 9px; border: 1.5px solid var(--kraft-2); font: inherit; font-size: 15px; outline: 0; background: #fff; color: inherit; }
.champ select:focus { border-color: var(--ambre-ff); box-shadow: 0 0 0 4px rgba(248,179,52,.28); }

/* ------------------------------------------------------------ dépôts libres : liste */
.tri { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font: 700 12.5px/1 var(--titre); color: var(--encre-2); }
.tri select { padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--kraft-2); background: var(--papier); font: 600 13.5px/1.2 var(--sans); color: var(--vert); }
tr.libre { cursor: pointer; } tr.libre:hover td { background: #FCFAF3; } tr.libre td b a { color: var(--vert); text-decoration: none; } tr.libre td .piece b { white-space: normal; word-break: break-word; }
tr.libre td.n { white-space: nowrap; } tr.libre td.n .btn + .btn { margin-left: 8px; }
.vide { display: grid; justify-items: center; gap: 6px; padding: 46px 26px; text-align: center; color: var(--encre-2); font-size: 14px; } .vide .dossier-ico { width: 46px; margin-bottom: 6px; } .vide b { font: 700 16px/1.3 var(--titre); color: var(--vert); }
.entete h1.long { font-size: 30px; word-break: break-word; }

/* ------------------------------------------------------------ administration */
.chapo-a { color: var(--encre-2); max-width: 760px; margin: 0 0 16px; font-size: 14.5px; }
.formulaire-a, .entite-a { margin-bottom: 20px; } .formulaire-a[hidden], .f-structure[hidden], [data-si-role][hidden] { display: none; }
.formulaire-a form, .f-structure, tr.edition form { padding: 0 26px 20px; } .f-structure { border-top: 1px solid var(--filet); padding-top: 6px; background: #FCFAF3; }
.grille-f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; align-items: start; } .grille-f .champ .mention { display: block; margin-top: 6px; }
.coche { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; color: var(--encre-3); cursor: pointer; } .coche input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--vert); flex: none; }
.coche b { display: block; font: 700 13.5px/1.3 var(--titre); color: var(--vert); }
.grille-f > .coche { margin-top: 38px; }
.actions-f { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; } .actions-f .mention { max-width: 560px; }
.pieces-f { border: 0; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; } .pieces-f legend { font: 700 12.5px/1 var(--titre); color: var(--encre-2); padding: 0; } .pieces-f .coche { margin-top: 12px; }
.comptes td small { display: block; font-size: 12px; color: var(--encre-t); font-weight: 700; } .comptes i { font-style: normal; font-weight: 400; color: var(--encre-3); } .comptes tr.eteint td { opacity: .55; }
tr.edition > td { background: #FCFAF3; padding: 6px 0 0; } tr.edition form { padding-bottom: 16px; }
.gestes { border-top: 1px solid var(--filet); padding: 4px 26px 14px; } .gestes form { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0 0; }
.gestes b { display: block; font: 700 13.5px/1.3 var(--titre); color: var(--vert); } .gestes span { font-size: 12.5px; color: var(--encre-3); }
.btn.danger { color: var(--rouge); } .btn.danger:hover { box-shadow: inset 0 0 0 1.5px var(--rouge); }
.lien-a { display: flex; gap: 20px; align-items: center; justify-content: space-between; background: var(--ambre-pale); border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; box-shadow: inset 0 0 0 1.5px var(--ambre); }
.lien-a b { display: block; font: 700 15px/1.3 var(--titre); color: var(--vert); } .lien-a span { font-size: 13px; color: #6B4700; } .lien-a code { display: block; margin-top: 8px; font-size: 12.5px; word-break: break-all; color: var(--vert); }
.entite-a > header { padding: 16px 26px; } .entite-a .nom-s { font: 700 14px/1.3 var(--titre); color: var(--vert); }
@media (max-width: 1100px) { .grille-f, .pieces-f, .rangement { grid-template-columns: 1fr; } .grille-f > .coche { margin-top: 16px; } .lien-a { flex-direction: column; align-items: flex-start; } }
.haut nav { gap: 20px; margin-left: 2px; } .haut { gap: 22px; }
.comptes .piece .av { display: grid; font: 800 10.5px/1 var(--titre); color: var(--vert); } .comptes .piece .av.cn { color: var(--ambre); } .comptes td:nth-child(2) { white-space: nowrap; }
tr.edition .gestes form { padding: 12px 0 0; }
.lien-a .btn span { color: inherit; font-size: inherit; } .lien-a .btn { flex: none; }