/* DARAJAE — système visuel commun (relevé sur les maquettes du 31/10/2026) */
:root{
  --ink:#042554; --ink-2:#3E5375; --ink-3:#6B7C98;
  --primary:#01B4DC; --primary-press:#0098BC; --primary-soft:#D1F4FE; --primary-tint:#E4F7FE;
  --side:#E5F7FD; --bg:#FCF7EE; --card:#FFFFFF; --line:#D5DFEA; --line-2:#E8EEF4;
  --sable:#F4EAD8; --sable-2:#F9F3E2; --sable-ink:#8A6A3B; --sable-accent:#D4B282;
  --eco:#1E8A6E; --eco-soft:#DDF3EC; --danger:#B42318; --danger-soft:#FDECEA; --warn:#B45309; --warn-soft:#FEF3E2;
  --av1:#C9E0FB; --av2:#ECE3FF; --av3:#D3F1E1; --av4:#FDE5CF; --av5:#E2F0D6; --av6:#FBDCE0;
  --r:12px; --r-s:8px; --font:'Nunito Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg.i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:18px;height:18px} svg.i.l{width:26px;height:26px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ---------- marque ---------- */
.brand{font-size:27px;letter-spacing:.005em;white-space:nowrap;color:var(--ink)}
.brand b{font-weight:800;letter-spacing:.01em}
.brand span{font-weight:500}

/* ---------- coque bureau (suite) ---------- */
.app{display:grid;grid-template-columns:288px 1fr;grid-template-rows:72px 1fr;height:100vh}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:24px;padding:0 24px;background:var(--bg);border-bottom:1px solid var(--line-2)}
.topbar .brand{width:240px}
.search{flex:1;max-width:880px;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border:1.5px solid #B9C9DC;border-radius:10px;background:#F7FBFE;color:var(--ink-3)}
.search.big{height:56px;border-color:var(--ink);background:#fff}
.search .go{margin-left:auto;margin-right:-10px;height:44px;width:72px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.lang{display:flex;align-items:center;gap:4px;font-weight:600}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--av1);color:var(--ink);flex:none}
.avatar.me{background:#4A9BE8;color:#fff}
.avatar.sm{width:40px;height:40px;font-size:15px} .avatar.lg{width:104px;height:104px;font-size:36px}
.av1{background:var(--av1)}.av2{background:var(--av2)}.av3{background:var(--av3)}.av4{background:var(--av4)}.av5{background:var(--av5)}.av6{background:var(--av6)}

.side{background:var(--side);padding:24px 18px;display:flex;flex-direction:column;gap:4px;overflow:hidden;border-right:1px solid var(--line-2)}
.cta{display:flex;align-items:center;gap:14px;height:56px;padding:0 20px;border-radius:10px;background:var(--primary);color:var(--ink);font-weight:700;font-size:18px;margin-bottom:18px}
.nav{display:flex;align-items:center;gap:16px;height:52px;padding:0 18px;border-radius:10px;font-size:17px;position:relative}
.nav.on{background:var(--primary-soft);font-weight:700}
.nav.on::before{content:"";position:absolute;left:-18px;top:6px;bottom:6px;width:5px;border-radius:0 4px 4px 0;background:var(--primary)}
.nav .n{margin-left:auto;min-width:30px;height:30px;padding:0 9px;border-radius:15px;background:#C7EAF6;display:grid;place-items:center;font-size:14px;font-weight:700}
.side h6{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:18px 18px 6px;font-weight:600;display:flex;justify-content:space-between}
.side hr{border:0;border-top:1px solid #C8DCE6;margin:12px 6px}
.side .grow{flex:1}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.main{padding:16px 20px 20px;overflow:hidden;display:flex;gap:16px;min-width:0}
.panel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line-2)}
.panel-h h1,.panel-h h2{font-size:28px;font-weight:700}
.panel-h .cnt{font-size:22px;color:var(--ink-2);font-weight:500}
.panel-b{padding:24px;overflow:auto;flex:1}
.pill-n{min-width:38px;height:38px;border-radius:19px;background:var(--primary-soft);display:inline-grid;place-items:center;font-weight:700;font-size:16px;padding:0 10px}
.seg{display:inline-flex;border:1.5px solid #B9C9DC;border-radius:10px;overflow:hidden;background:#fff}
.seg>*{padding:10px 26px;font-weight:600;border-right:1.5px solid #B9C9DC}.seg>*:last-child{border:0}
.seg .on{background:var(--primary-soft);font-weight:700}
.chips{display:flex;gap:10px}.chip{padding:8px 24px;border-radius:10px;font-weight:600}.chip.on{background:var(--primary-soft)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;border-radius:16px;background:#D9F6FE;font-weight:600;font-size:15px}
.tag.sable{background:var(--sable);color:var(--sable-ink)}
.tag.eco{background:var(--eco-soft);color:var(--eco)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.round-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid #B9C9DC;display:inline-grid;place-items:center;background:#fff}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font-weight:600;font-size:17px}
.btn.sm{height:42px;padding:0 18px;font-size:15px;gap:8px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--ink);font-weight:700}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.block{width:100%}
.iconbar{display:flex;align-items:center;gap:30px;color:var(--ink)}
.iconbar span{display:inline-flex;align-items:center;gap:10px;font-size:16px}

/* listes */
.letter{background:#FBF6EE;padding:10px 26px;font-weight:700;font-size:20px}
.row{display:flex;align-items:center;gap:20px;padding:14px 26px;border-bottom:1px solid var(--line-2);background:#fff}
.row.sel{background:var(--primary-tint);outline:1.5px solid var(--ink);outline-offset:-1.5px;border-radius:8px;margin:2px 6px}
.row .t{font-weight:700;font-size:18px}.row .s{color:var(--ink-2);font-size:15.5px}
.row .end{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--ink-2)}
.cb{width:22px;height:22px;border:1.5px solid #9DB0C7;border-radius:4px;background:#fff;flex:none;display:grid;place-items:center}
.cb.on{background:var(--primary);border-color:var(--primary);color:#fff}
.cb.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.cb.sab{background:var(--sable-accent);border-color:var(--sable-accent);color:#fff}
.star-on{color:var(--primary);fill:var(--primary)}

/* fiche */
.field{display:grid;grid-template-columns:44px 160px 1fr auto;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.field .k{color:var(--ink-2)} .field .v{font-weight:600}
.note{background:#F3F6F9;border:1px solid var(--line-2);border-radius:8px;padding:14px 18px}

/* formulaires */
.form{display:grid;gap:18px}
.lbl{font-weight:700;font-size:15px;margin-bottom:6px;display:block}
.inp{width:100%;height:50px;border:1.5px solid #B9C9DC;border-radius:8px;padding:0 14px;background:#fff;display:flex;align-items:center;gap:10px;color:var(--ink)}
.inp.ph{color:var(--ink-3)}
.inp.area{height:96px;align-items:flex-start;padding-top:12px}
.hint{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.toggle{width:52px;height:30px;border-radius:15px;background:var(--primary);position:relative;flex:none}
.toggle::after{content:"";position:absolute;right:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff}
.toggle.off{background:#C6D2DF}.toggle.off::after{right:auto;left:3px}

/* encadrés */
.box{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;padding:20px}
.box.sable{background:var(--sable-2);border-color:#EADBBE}
.box.tint{background:var(--primary-tint);border-color:#BFE8F5}
.box.eco{background:var(--eco-soft);border-color:#B9E4D6}
.box.warn{background:var(--warn-soft);border-color:#F6D5A8}
.box h3{font-size:18px;margin-bottom:6px}
.muted{color:var(--ink-2)} .small{font-size:13.5px}
.hstack{display:flex;align-items:center;gap:12px}.vstack{display:flex;flex-direction:column;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* tableaux */
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:10px 14px;border-bottom:1.5px solid var(--line);background:#FAFCFE}
table.t td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}

/* ---------- coque téléphone ---------- */
.m{width:390px;min-height:844px;display:flex;flex-direction:column;background:var(--bg);position:relative}
.m-status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-weight:700;font-size:16px}
.m-top{display:flex;align-items:center;gap:14px;padding:14px 18px 10px;background:var(--bg)}
.m-top .brand{font-size:24px}
.m-top .r{margin-left:auto;display:flex;align-items:center;gap:16px}
.m-body{flex:1;padding:0 0 96px}
.m-pad{padding:0 16px}
.m .search{height:44px;margin:4px 16px 12px;max-width:none}
.m-tabs{position:absolute;left:0;right:0;bottom:0;height:80px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);background:#FCFAF6}
.m-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;color:var(--ink)}
.m-tabs a.on{color:#0496BC;font-weight:700}
.m-tabs a.on svg{color:#0496BC}
.m-tabs a.on .pad{background:var(--primary-soft);border-radius:12px;padding:3px 18px}
.fab{position:absolute;right:16px;bottom:96px;width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(1,120,160,.28)}
.fab.wide{width:auto;padding:0 26px;border-radius:32px;gap:12px;display:flex;font-weight:700;font-size:18px;color:var(--ink)}
.m .letter{padding:8px 18px;font-size:18px}
.m .row{padding:12px 18px;gap:14px}
.m .row .t{font-size:17px}.m .row .s{font-size:14.5px}
.m h1{font-size:28px;font-weight:800}
.m .btn{height:50px;font-size:16px}
.m-head{display:flex;align-items:center;gap:12px;padding:10px 16px}
.m-head h1{font-size:22px}
.m .field{grid-template-columns:36px 1fr auto;padding:14px 0}
.m .field .k{grid-column:2}.m .field .v{grid-column:2}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(4,37,84,.15);padding:10px 18px 28px}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:#CBD5E1;margin:0 auto 14px}

/* ---------- navigateur (Viewer) ---------- */
.chrome{background:#E9EEF3}
.tabs{height:42px;display:flex;align-items:flex-end;gap:8px;padding:0 12px}
.tab{height:36px;width:270px;background:#fff;border-radius:10px 10px 0 0;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:14px}
.tab .x{margin-left:auto}
.winctl{margin-left:auto;display:flex;gap:30px;align-self:center;padding-right:10px}
.urlbar{height:50px;background:#fff;display:flex;align-items:center;gap:22px;padding:0 18px;border-bottom:1px solid var(--line-2)}
.urlbar .url{flex:1;height:36px;border:1.5px solid #C5D1DE;border-radius:18px;display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--ink-2)}
.v-side{background:linear-gradient(180deg,#EAF7FC,#E3F3FA);padding:28px 16px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line-2)}
.quick{display:flex;align-items:center;gap:18px;height:84px;padding:0 22px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font-size:18px;font-weight:600}
.quick .ar{margin-left:auto}
.qround{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;text-align:center;font-size:15px}
.qround .c{width:76px;height:76px;border-radius:50%;border:1.5px solid #CAD6E3;background:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.photo{background-size:cover;background-position:center;border-radius:14px}
.mark{font-weight:900;font-size:20px;letter-spacing:-.02em}
.eco-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:24px;background:#fff;color:var(--eco);font-weight:700}
.eco-link{color:var(--eco);display:inline-flex;align-items:center;gap:8px;font-weight:600}
.eco-dot{width:9px;height:9px;border-radius:50%;background:#16A34A}

/* agenda */
.cal{display:grid;grid-template-columns:110px repeat(7,1fr);background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;flex:1;position:relative}
.cal .hd{padding:12px 6px;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line-2);font-size:16px}
.cal .hd.today{background:var(--primary-tint)}
.cal .tz{padding:12px 8px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.cal .h{height:64px;padding:0 14px;text-align:right;color:var(--ink-2);font-size:16px;transform:translateY(-10px)}
.cal .c{height:64px;border-left:1px solid var(--line-2);border-top:1px dashed #E3EAF1;position:relative}
.cal .c.today{background:#EEF9FD}
.ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:6px 10px;font-size:13.5px;border-left:4px solid var(--primary);background:#CFF2FB;z-index:1}
.ev b{display:block;font-size:14.5px}
.ev.navy{border-color:#1E55C8;background:#D4E3FD}.ev.sab{border-color:var(--sable-accent);background:var(--sable-2)}
.minical{background:#fff;border-radius:var(--r);padding:16px}
.minical .g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:6px 0;font-size:15px;margin-top:10px}
.minical .g .o{color:#9AA8BA}.minical .g .td{background:var(--primary);color:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;margin:0 auto}
.pop{position:absolute;background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:18px 20px;box-shadow:0 10px 30px rgba(4,37,84,.16);z-index:5}

/* ajustements après comparaison avec les maquettes fournies (lot 1) */
svg.i.star-on{fill:var(--primary);stroke:var(--primary)}
.m{height:844px;overflow:hidden}
.m-body{overflow:hidden}
.m-top{padding:10px 18px 6px}
.m .row{padding:9px 18px}
.m .letter{padding:4px 18px;font-size:17px}
.m .seg>*{padding:9px 4px;gap:6px}
.m .avatar{width:44px;height:44px}
.m .search{flex:none}
.m .compose .field{grid-template-columns:56px 1fr auto}
.m .compose .field .k,.m .compose .field .v{grid-column:auto}
.sheet{z-index:6}
.sheet .box{padding:8px 12px}
.sheet .btn{height:46px}

/* logo officiel DARAJAE (fourni le 31/10/2026) */
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:.86em;width:auto;display:block;transform:translateY(-1px)}
.brand span{font-weight:500}