/* Portail IRCC — système de design partagé (portail + panel admin)
   Palette : rouge + blanc, gris neutres. Police : Inter. */
:root{
  --red:#C8102E;--red-d:#A30D25;--red-bg:#FDF1F3;--red-bg2:#FADDE2;--red-ring:rgba(200,16,46,.18);
  --bg:#F5F6F8;--surface:#fff;--surface2:#FAFAFB;--ink:#111827;--ink2:#4B5563;--ink3:#8A93A3;--ph:#B4BAC6;
  --brd:#E4E7EC;--brd2:#D0D5DD;--shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 3px rgba(16,24,40,.06),0 3.5px 12px rgba(16,24,40,.05);--shadow-lg:0 10px 34px rgba(16,24,40,.16);
  --r-sm:7px;--r:10px;--r-lg:13.5px;--hdr-h:54.5px;--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --red:#EF4A5F;--red-d:#F26577;--red-bg:#2C171B;--red-bg2:#40202A;--red-ring:rgba(239,74,95,.28);
  --bg:#0E1116;--surface:#161A21;--surface2:#1B2029;--ink:#F3F4F6;--ink2:#B6BDC9;--ink3:#7E8796;--ph:#4F5766;
  --brd:#272D38;--brd2:#343B48;--shadow-sm:none;--shadow:0 1px 3px rgba(0,0,0,.4);--shadow-lg:0 13.5px 41px rgba(0,0,0,.6);color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:12px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--red)}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red-bg2)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13.5px;border-radius:var(--r-sm);border:1px solid var(--brd2);background:var(--surface);color:var(--ink);font-size:11.5px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--surface2);border-color:var(--ink3)}
.btn:active{transform:translateY(1px)}
.btn i{font-size:14.5px}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 1px 2px rgba(200,16,46,.3)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-danger{background:var(--red-bg);border-color:var(--red-bg2);color:var(--red)}
.btn-danger:hover{background:var(--red-bg2);border-color:var(--red)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-sm{height:29px;padding:0 10px;font-size:11px}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-icon{width:34px;padding:0}
.btn-icon.btn-sm{width:29px}

/* ── Champs ── */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.lbl{font-size:11px;font-weight:600;color:var(--ink2)}
.lbl em{color:var(--red);font-style:normal}
.hint{font-size:11px;color:var(--ink3)}
.inp,.ms-btn,.dp-btn{width:100%;height:35.5px;padding:0 11px;border:1px solid var(--brd2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.inp::placeholder{color:var(--ph);opacity:1}
.inp:hover,.ms-btn:hover,.dp-btn:hover{border-color:var(--ink3)}
.inp:focus,.ms.open .ms-btn,.dp.open .dp-btn{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
.inp[readonly]{background:var(--surface2);color:var(--ink2)}
.inp-wrap{position:relative;display:flex;align-items:center}
.inp-wrap .inp{padding-right:66.5px}
.inp-aff{position:absolute;right:10px;font-size:11px;color:var(--ink3);pointer-events:none}
.inp-lock{position:relative}
.inp-lock .inp{padding-left:32.5px;font-weight:600}
.inp-lock>i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:13.5px}
.grid{display:grid;gap:13.5px 15.5px;grid-template-columns:repeat(auto-fill,minmax(195.5px,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.grid,.grid.g2{grid-template-columns:1fr}}

/* ── Sélecteur moderne ── */
.ms{position:relative;width:100%}
.ms select{display:none}
.ms-btn{display:flex;align-items:center;justify-content:space-between;gap:7px;text-align:left;cursor:pointer}
.ms-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ms-btn.is-empty .ms-val{color:var(--ph)}
.ms-btn>i{color:var(--ink3);font-size:13.5px;transition:transform .2s;flex:none}
.ms.open .ms-btn>i{transform:rotate(180deg)}
.ms[data-disabled] .ms-btn{opacity:.55;pointer-events:none}
.pop-bd{position:fixed;inset:0;z-index:900;background:rgba(15,20,30,.4);opacity:0;transition:opacity .2s}
.pop-bd.show{opacity:1}
.pop{position:fixed;z-index:910;background:var(--surface);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(-4px) scale(.985);transition:opacity .12s,transform .12s}
.pop.show{opacity:1;transform:none}
.pop-search{display:flex;align-items:center;gap:7px;padding:8.5px 10px;border-bottom:1px solid var(--brd)}
.pop-search i{color:var(--ink3)}
.pop-search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;outline:none;min-width:0}
.pop-search input::placeholder{color:var(--ph)}
.pop-list{list-style:none;margin:0;padding:5px;overflow-y:auto;overscroll-behavior:contain;max-height:231px}
.pop-item{display:flex;align-items:center;justify-content:space-between;gap:8.5px;padding:7.5px 8.5px;border-radius:7px;font-size:12px;cursor:pointer;color:var(--ink)}
.pop-item.hl{background:var(--surface2)}
.pop-item.sel{color:var(--red);font-weight:600}
.pop-item.sel::after{content:'';width:13.5px;height:13.5px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}
.pop-item small{color:var(--ink3);font-size:11px}
.pop-item.add{color:var(--red);font-weight:600}
.pop-empty{padding:13.5px;text-align:center;color:var(--ink3);font-size:11px}
.pop-clear{display:block;width:100%;text-align:left;padding:8.5px 12px;border:0;border-top:1px solid var(--brd);background:transparent;color:var(--ink3);font-size:11px}
.pop-clear:hover{color:var(--red)}
@media(max-width:640px){
  .pop{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;border-radius:17px 17px 0 0;border-width:1px 0 0;transform:translateY(20.5px);padding-bottom:env(safe-area-inset-bottom)}
  .pop.show{transform:none}
  .pop-list{max-height:52vh}
  .pop-item{padding:11px 10px;font-size:13px}
  .pop::before{content:'';display:block;width:32.5px;height:3.5px;border-radius:3.5px;background:var(--brd2);margin:7px auto 0}
}

/* ── Calendrier ── */
.dp{position:relative;width:100%}
.dp-btn{display:flex;align-items:center;gap:8.5px;text-align:left}
.dp-btn>i{color:var(--ink3);font-size:14.5px}
.dp-btn.is-empty .dp-txt{color:var(--ph)}
.dp-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal{padding:10px;width:258.5px;max-width:100%}
.cal-hd{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:7px}
.cal-nav{width:29px;height:29px;border:0;border-radius:7px;background:transparent;color:var(--ink2);display:grid;place-items:center}
.cal-nav:hover{background:var(--surface2)}
.cal-ttl{border:0;background:transparent;font-weight:700;font-size:12px;padding:5px 8.5px;border-radius:7px;color:var(--ink)}
.cal-ttl:hover{background:var(--surface2)}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow span{text-align:center;font-size:11px;font-weight:600;color:var(--ink3);padding:5px 0}
.cal-day{height:32.5px;border:0;border-radius:7.5px;background:transparent;font-size:11.5px;color:var(--ink)}
.cal-day:hover{background:var(--surface2)}
.cal-day.out{color:var(--ph)}
.cal-day.today{box-shadow:inset 0 0 0 1px var(--red);color:var(--red);font-weight:700}
.cal-day.sel{background:var(--red);color:#fff;font-weight:700;box-shadow:none}
.cal-day[disabled]{opacity:.3;pointer-events:none}
.cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-height:221px;overflow-y:auto}
.cal-cell{height:35.5px;border:0;border-radius:7.5px;background:transparent;font-size:12px;color:var(--ink)}
.cal-cell:hover{background:var(--surface2)}
.cal-cell.sel{background:var(--red);color:#fff;font-weight:700}
.cal-ft{display:flex;justify-content:space-between;margin-top:7px;padding-top:7px;border-top:1px solid var(--brd)}
.cal-ft button{border:0;background:transparent;color:var(--red);font-weight:600;font-size:11px;padding:5px 7px;border-radius:7px}
.cal-ft button:hover{background:var(--red-bg)}

/* ── Téléphone ── */
.phone{display:grid;grid-template-columns:98.5px 1fr;gap:7px}
.phone .ms-btn{padding:0 8.5px}

/* ── Pastilles ── */
.pill{display:inline-flex;align-items:center;gap:5px;height:20.5px;padding:0 8.5px;border-radius:84px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.pill-done{background:var(--red-bg);color:var(--red);border-color:var(--red-bg2)}
.pill-active{background:var(--red);color:#fff}
.pill-active::before{background:#fff;animation:pulse 1.6s infinite}
.pill-wait{background:var(--surface2);color:var(--ink3);border-color:var(--brd)}
.pill-no{background:transparent;color:var(--ink2);border-color:var(--brd2)}
@keyframes pulse{50%{opacity:.35}}

/* ── Modales / toast ── */
.modal-bg{position:fixed;inset:0;z-index:800;background:rgba(15,20,30,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:13.5px}
.modal-bg.open{display:flex;animation:fade .15s}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:374px;max-height:calc(100dvh - 27px);overflow-y:auto;padding:20.5px;animation:rise .2s}
.modal h3{margin:0 0 5px;font-size:15.5px;letter-spacing:-.01em}
.modal>p{margin:0 0 15.5px;color:var(--ink2);font-size:11.5px}
.modal-actions{display:flex;gap:8.5px;justify-content:flex-end;margin-top:17px;flex-wrap:wrap}
.modal-ico{width:37.5px;height:37.5px;border-radius:10px;display:grid;place-items:center;background:var(--red-bg);color:var(--red);font-size:18.5px;margin-bottom:12px}
.form-err{display:none;margin-top:10px;padding:8.5px 10px;border-radius:var(--r-sm);background:var(--red-bg);color:var(--red);font-size:11px;font-weight:500}
.toast{position:fixed;left:50%;bottom:20.5px;transform:translate(-50%,17px);z-index:1000;background:var(--ink);color:var(--surface);padding:9.5px 15.5px;border-radius:84px;font-size:11.5px;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 27px);display:flex;gap:7px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8.5px) scale(.98)}}
@media(max-width:560px){.modal-bg{align-items:flex-end;padding:0}.modal{border-radius:17px 17px 0 0;max-width:none;max-height:92dvh;padding:18.5px 15.5px calc(18.5px + env(safe-area-inset-bottom))}.modal-actions .btn{flex:1}}

/* ── Cartes / tableaux ── */
.card{background:var(--surface);border:1px solid var(--brd);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-hd{display:flex;align-items:center;gap:8.5px;padding:13.5px 17px;border-bottom:1px solid var(--brd);font-weight:700;font-size:12.5px}
.card-hd i{color:var(--red);font-size:16px}
.card-bd{padding:17px}
.skel{position:fixed;inset:0;z-index:2000;background:var(--bg);display:grid;place-items:center}
.skel.hidden{display:none}
.skel-in{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink3);font-size:11px}
.spinner{width:25.5px;height:25.5px;border:3px solid var(--brd);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite}
.scroll-x{overflow-x:auto}