/* PORTAIL DES DÉMARCHES CNPA — charte graphique reprise de www.cnpa.km et des formulaires officiels */
@font-face{font-family:'Spectral';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/spectral-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/spectral-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-weight:600;font-display:swap;src:url(fonts/spectral-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-weight:700;font-display:swap;src:url(fonts/spectral-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:400;font-display:swap;src:url(fonts/public-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/public-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:500;font-display:swap;src:url(fonts/public-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:600;font-display:swap;src:url(fonts/public-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:700;font-display:swap;src:url(fonts/public-sans-latin-700-normal.woff2) format('woff2')}

:root{
  --g9:#0B4D26; --g7:#157A3C; --g5:#1BA24A; --ink:#16241C; --txt:#3C4F44; --mut:#5B7767; --fnt:#8AA093;
  --soft:#F6FAF5; --sb:#E7F0E6; --bd:#E4EBE3; --line:#9EC4AD; --or:#F5C518; --orf:#FFF8DC; --orb:#F2E2A0;
  --rouge:#CE1126; --bleu:#1B3F8F; --err:#B42318; --errf:#FEF3F2;
  --titre:'Spectral',Georgia,'Times New Roman',serif; --corps:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);color:var(--txt);background:#EEF3ED;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--g7)}
:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barre du site ---------- */
.site{background:var(--g9);color:#fff}
.site .in{max-width:980px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;font-size:13.5px}
.site a{color:#fff;text-decoration:none}
.site .sp{flex:1}
.site .lien{opacity:.85}
.site .lien:hover{opacity:1;text-decoration:underline}
.drapeau{height:6px;background:linear-gradient(90deg,var(--g9) 0 72%,var(--or) 72% 81%,var(--rouge) 81% 90%,var(--bleu) 90% 100%)}

/* ---------- la « feuille » ---------- */
.page{max-width:900px;margin:28px auto 40px;padding:0 16px}
.feuille{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(11,77,38,.06),0 8px 30px rgba(11,77,38,.08);position:relative;overflow:hidden}
.feuille > .drapeau{height:7px}
.feuille .corps{padding:30px 54px 34px}
@media (max-width:700px){.feuille .corps{padding:22px 18px 26px}.page{margin:16px auto 28px;padding:0 10px}}

/* en-tête institutionnel */
.hd{display:flex;align-items:center;gap:14px}
.hd img{width:62px;height:62px;object-fit:contain;flex:none}
.hd .u{font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--ink);font-weight:600}
.hd .d{font-size:11px;color:var(--mut);font-style:italic;margin-top:1px}
.hd .n{font-family:var(--titre);font-weight:700;font-size:16.5px;color:var(--g9);margin-top:3px;line-height:1.15}
.hd .sp{flex:1}
.ref{border:1px solid var(--bd);border-radius:10px;padding:8px 12px;text-align:right;background:var(--soft);min-width:190px}
.ref .k{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);font-weight:600}
.ref .v{font-size:13px;color:var(--ink);margin-top:4px;font-weight:600;letter-spacing:.3px}
.ref .s{font-size:10px;color:var(--fnt);margin-top:2px}
@media (max-width:700px){.hd{flex-wrap:wrap}.hd img{width:50px;height:50px}.ref{width:100%;text-align:left;margin-top:6px}}

.tag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--g7)}
.titre{margin-top:24px}
h1{font-family:var(--titre);font-weight:700;color:var(--g9);font-size:34px;line-height:1.08;margin:4px 0 6px;letter-spacing:-.3px}
.sous{font-size:16px;color:var(--ink)}
.chip{display:inline-block;margin-top:9px;font-size:12px;font-weight:600;color:var(--g7);background:var(--soft);border:1px solid var(--sb);border-radius:99px;padding:3px 12px}
@media (max-width:700px){h1{font-size:28px}}

.box{background:var(--soft);border:1px solid var(--sb);border-left:3px solid var(--g7);border-radius:8px;padding:10px 14px;margin-top:10px;font-size:14px}
.box b{color:var(--ink)}
.box.or{background:var(--orf);border-color:var(--orb);border-left-color:var(--or)}
.box.err{background:var(--errf);border-color:#FECDCA;border-left-color:var(--err);color:var(--err)}
.box.ok{background:#ECFDF3;border-color:#ABEFC6;border-left-color:var(--g5)}
.session{display:flex;gap:12px;align-items:center;margin-top:14px;background:var(--g9);color:#fff;border-radius:10px;padding:11px 16px;font-size:14px}
.session b{color:var(--or)}
.session.close{background:var(--err)}

/* sections numérotées */
h2.sec{display:flex;align-items:center;gap:10px;font-family:var(--titre);font-weight:700;font-size:19px;color:var(--g9);margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bd);line-height:1.2}
h2.sec .no{font-family:var(--corps);font-size:11.5px;font-weight:700;width:24px;height:24px;border-radius:50%;background:var(--g9);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
h2.sec .art{margin-left:auto;font-family:var(--corps);font-size:11.5px;font-weight:600;color:var(--mut);letter-spacing:.3px}
.hint{font-size:13px;color:var(--mut);margin:-4px 0 8px}

/* champs : libellé à gauche, ligne à remplir à droite (comme le formulaire papier) */
.row{display:grid;grid-template-columns:37% 1fr;gap:16px;align-items:start;padding:5px 0}
.row > label,.row > .lab{font-size:14px;color:var(--txt);padding-top:9px;line-height:1.3}
.req{color:var(--rouge);font-weight:700;margin-left:2px}
.ctl input[type=text],.ctl input[type=email],.ctl input[type=tel],.ctl input[type=date],.ctl input[type=password],.ctl textarea,.ctl select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);
  padding:6px 2px;border-radius:0;outline:none;transition:border-color .15s,background .15s}
.ctl textarea{min-height:88px;resize:vertical;background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--sb) 27px 28px);line-height:28px;border:1px solid var(--sb);border-bottom:1.5px solid var(--line);padding:0 6px}
.ctl input:focus,.ctl textarea:focus,.ctl select:focus{border-bottom-color:var(--g7);background:var(--soft)}
.ctl .aide{font-size:12.5px;color:var(--mut);margin-top:4px}
.row.erreur input,.row.erreur textarea{border-bottom-color:var(--err);background:var(--errf)}
.msg-err{font-size:12.5px;color:var(--err);margin-top:4px;font-weight:600}
.row.bloc{grid-template-columns:1fr;gap:4px}
.row.bloc > label{padding-top:4px}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:2px}.row > label,.row > .lab{padding-bottom:0}}

/* cases à cocher et boutons radio, dessinés comme sur le papier */
.choix{display:grid;gap:8px 18px;padding:4px 0}
.ck{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.35;cursor:pointer}
.ck input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.6px solid var(--g7);border-radius:3px;margin:1px 0 0;flex:none;background:#fff;display:grid;place-content:center;cursor:pointer}
.ck input[type=radio]{border-radius:50%}
.ck input::before{content:"";width:9px;height:9px;transform:scale(0);transition:transform .12s;background:var(--g7);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.ck input[type=radio]::before{clip-path:none;border-radius:50%;width:8px;height:8px}
.ck input:checked::before{transform:scale(1)}
.grp{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start;padding:5px 0}
.grp .k{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:var(--mut);padding-top:3px}
.grp.erreur .k{color:var(--err)}
@media (max-width:700px){.grp{grid-template-columns:1fr;gap:4px}.choix{grid-template-columns:1fr!important}}

/* pièces à joindre */
.pieces{border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.pc{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:11px 14px;border-top:1px dotted var(--bd)}
.pc:first-child{border-top:0}
.pc .etat{width:17px;height:17px;border:1.6px solid var(--g7);border-radius:3px;margin-top:2px;display:grid;place-content:center;background:#fff}
.pc.ok .etat{background:var(--g7)}
.pc.ok .etat::before{content:"";width:10px;height:10px;background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.pc .lib{font-size:14.5px;color:var(--ink);line-height:1.35}
.pc .lib small{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.pc.opt .lib{color:var(--txt)}
.pc.frais{background:var(--orf)}
.pc .fichiers{grid-column:2 / 4;font-size:12.5px;color:var(--g7);margin-top:-4px}
.pc .fichiers span{display:inline-block;background:var(--soft);border:1px solid var(--sb);border-radius:6px;padding:1px 8px;margin:4px 6px 0 0}
.pc.erreur{background:var(--errf)}
.joindre{position:relative;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--g7);color:var(--g7);border-radius:99px;padding:5px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;background:#fff}
.joindre:hover{background:var(--soft)}
.joindre input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.tg{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:1px}
.tg.r{background:var(--sb);color:var(--g7)} .tg.o{border:1px solid var(--bd);color:var(--mut)}
@media (max-width:700px){.pc{grid-template-columns:22px 1fr}.pc .joindre{grid-column:2}.pc .fichiers{grid-column:1 / 3}}

/* encadré de dépôt */
.depot{border:1.5px solid var(--g7);border-radius:12px;overflow:hidden;margin-top:18px}
.depot .t{background:var(--g9);color:#fff;font-family:var(--titre);font-weight:600;font-size:16px;padding:9px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.depot .t span{font-family:var(--corps);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--or);font-weight:700}
.depot .c{display:grid;grid-template-columns:repeat(3,1fr)}
.depot .c > div{padding:11px 16px;font-size:13.5px;line-height:1.45}
.depot .c > div + div{border-left:1px solid var(--sb)}
.depot .c .k{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--g7);font-weight:700;margin-bottom:3px}
.depot .one{padding:11px 16px;font-size:14px}
.depot .f{background:var(--orf);border-top:1px solid var(--orb);padding:8px 16px;font-size:13.5px;color:var(--ink)}
@media (max-width:700px){.depot .c{grid-template-columns:1fr}.depot .c > div + div{border-left:0;border-top:1px solid var(--sb)}}

/* signature / envoi */
.envoi{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:16px;flex-wrap:wrap}
.envoi .fait{font-size:14.5px}
.envoi .fait b{border-bottom:1.5px solid var(--line);padding:0 10px 2px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--g9);color:#fff;border:0;border-radius:99px;padding:13px 26px;font:inherit;font-weight:700;font-size:15.5px;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s}
.btn:hover{background:var(--g7);transform:translateY(-1px)}
.btn.sec{background:#fff;color:var(--g9);border:1.5px solid var(--g9)}
.btn.or{background:var(--or);color:var(--g9)}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
.cadre{margin-top:22px;border:1px dashed var(--fnt);border-radius:10px;background:var(--soft);padding:10px 16px;font-size:13px;color:var(--txt)}
.cadre .k{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--g9);font-weight:700;margin-bottom:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pied{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--bd);margin-top:30px;padding-top:10px;font-size:12px;color:var(--mut)}
.pied b{color:var(--g9);font-weight:600}
@media (max-width:700px){.pied{flex-direction:column;gap:4px}}

/* barre de progression d'envoi */
.progression{display:none;margin-top:14px}
.progression.on{display:block}
.progression .barre{height:8px;background:var(--sb);border-radius:99px;overflow:hidden}
.progression .barre i{display:block;height:100%;width:0;background:var(--g7);transition:width .2s}
.progression p{font-size:13px;color:var(--mut);margin:6px 0 0}

/* ---------- accueil : choix du régime ---------- */
.portes{display:grid;gap:12px;margin-top:20px}
.porte{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;text-decoration:none;color:var(--ink);background:var(--soft);border:1.5px solid transparent;border-radius:12px;padding:14px 18px;transition:border-color .15s,background .15s}
.porte:hover{border-color:var(--g7);background:#fff}
.porte .ico{width:54px;height:54px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--g7);font-family:var(--titre);font-weight:700;font-size:22px;border:1px solid var(--sb)}
.porte .t{font-family:var(--titre);font-weight:700;font-size:19px;color:var(--g9)}
.porte .d{font-size:14px;color:var(--mut)}
.porte .a{font-size:12px;font-weight:700;color:var(--g7);margin-top:2px}
.porte .fl{color:var(--g7);font-size:22px}
.porte .badge{display:inline-block;font-family:var(--corps);font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:var(--or);color:var(--g9);border-radius:5px;padding:2px 7px;margin-left:8px;vertical-align:3px}
.porte .badge.ferme{background:var(--bd);color:var(--mut)}
@media (max-width:560px){.porte{grid-template-columns:44px 1fr}.porte .fl{display:none}.porte .ico{width:44px;height:44px;font-size:18px}}

/* ---------- récépissé ---------- */
.recu-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.recu-table td{border:1px solid var(--bd);padding:9px 12px;vertical-align:top}
.recu-table td:first-child{background:var(--soft);width:36%;color:var(--mut);font-size:13px;letter-spacing:.3px}
.recu-num{font-family:var(--titre);font-size:24px;font-weight:700;color:var(--g9)}
.tampon{margin-top:22px;display:flex;gap:16px;align-items:center;border:1.5px solid var(--g7);border-radius:12px;padding:14px 18px;background:#fff}
.tampon .rond{width:58px;height:58px;border-radius:50%;border:2px solid var(--g7);display:flex;align-items:center;justify-content:center;color:var(--g7);font-weight:800;font-size:12px;letter-spacing:1px;flex:none;text-align:center;line-height:1.1}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media print{
  body{background:#fff}
  .site,.actions,.noprint{display:none!important}
  .page{margin:0;max-width:none;padding:0}
  .feuille{box-shadow:none;border-radius:0}
  .feuille .corps{padding:16mm 14mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.ck.erreur span{color:var(--err)}

/* ---------- espace agents ---------- */
.adm{max-width:1180px}
.adm-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.adm-nav a{text-decoration:none;color:var(--g9);font-weight:600;font-size:14px;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--bd)}
.adm-nav a.on{background:var(--g9);color:#fff;border-color:var(--g9)}
.adm-nav .sp{flex:1}
.adm-nav .qui{font-size:13px;color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat{background:var(--soft);border:1px solid var(--sb);border-radius:12px;padding:12px 16px}
.stat .k{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:var(--mut)}
.stat .v{font-family:var(--titre);font-weight:700;font-size:30px;color:var(--g9);line-height:1.1;margin-top:2px}
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:10px 0 14px}
.filtres label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.filtres select,.filtres input{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--ink);min-width:150px}
.filtres .btn{padding:8px 18px;font-size:14px}
table.liste{width:100%;border-collapse:collapse;font-size:14px}
table.liste th{text-align:left;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:700;padding:9px 10px;border-bottom:1.5px solid var(--g9);white-space:nowrap}
table.liste td{padding:10px;border-bottom:1px solid var(--bd);vertical-align:top}
table.liste tr:hover td{background:var(--soft)}
table.liste a{font-weight:600;text-decoration:none}
.st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--sb);color:var(--g9)}
.st.recu{background:#EAF1FB;color:var(--bleu)} .st.incomplet,.st.defavorable{background:var(--errf);color:var(--err)}
.st.favorable{background:#ECFDF3;color:#067647} .st.instruction,.st.recevable{background:var(--orf);color:#7a5b00} .st.archive{background:#F2F4F3;color:var(--mut)}
.mini{font-size:12px;color:var(--mut)}
.dl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px}
@media (max-width:860px){.dl{grid-template-columns:1fr}}
.donnees{width:100%;border-collapse:collapse;font-size:14px}
.donnees td{padding:7px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
.donnees td:first-child{color:var(--mut);width:42%;font-size:13px}
.donnees tr.s td{background:var(--soft);font-family:var(--titre);font-weight:700;color:var(--g9);font-size:15px;padding-top:12px}
.fic{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;text-decoration:none;color:var(--ink);background:#fff}
.fic:hover{border-color:var(--g7)}
.fic .x{width:38px;height:44px;border-radius:6px;background:var(--g7);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;flex:none}
.fic b{display:block;font-size:13.5px}
.panneau{background:var(--soft);border:1px solid var(--sb);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.panneau h3{font-family:var(--titre);color:var(--g9);margin:0 0 8px;font-size:17px}
.panneau select,.panneau textarea,.panneau input[type=text],.panneau input[type=password],.panneau input[type=email]{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;margin:4px 0 10px}
.journal{font-size:12.5px;color:var(--mut);list-style:none;padding:0;margin:0}
.journal li{padding:5px 0;border-bottom:1px dotted var(--bd)}
.connexion{max-width:440px;margin:40px auto}