/* Neuralite : habillage de l'application.
   Charte du site : navy #254563, papier #f9f5f0, crème #f2e7dd, or #c49a5b, encre #182b3f.
   Fraunces pour les titres, Inter pour le texte. Chargé après les styles de
   l'application : il ne change que l'apparence, jamais le comportement. */

:root{
  --host-top:0px;
  --navy:#254563; --navy2:#1c3550; --gold:#c49a5b; --gold-soft:#d9b881; --cream:#f2e7dd;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Inter",system-ui,-apple-system,sans-serif;
  --bg:#f9f5f0; --surface:#ffffff; --ink:#182b3f; --muted:#5d6b78; --line:#e8dfd3;
  --accent:#254563; --on-accent:#ffffff; --accent-bg:#e7edf3;
  --ok:#2c6b4b; --ok-bg:#e2f1e8; --warn:#8a5a12; --warn-bg:#f7ead0;
  --late:#b3382c; --late-bg:#fbe4e0; --mute-bg:#efe8de;
  --r:18px; --rs:12px; --lift:0 10px 30px rgba(24,43,63,.16);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f1b28; --surface:#172a3d; --ink:#f2e7dd; --muted:#a9b6c2; --line:#25384c;
  --accent:#9fc0de; --on-accent:#0f1b28; --accent-bg:#1e3750;
  --ok:#86d3a6; --ok-bg:#16362a; --warn:#e0bd7a; --warn-bg:#3b2f15;
  --late:#ff9e95; --late-bg:#46201d; --mute-bg:#213447; --lift:0 10px 30px rgba(0,0,0,.5);
} }
:root[data-theme="dark"]{
  --bg:#0f1b28; --surface:#172a3d; --ink:#f2e7dd; --muted:#a9b6c2; --line:#25384c;
  --accent:#9fc0de; --on-accent:#0f1b28; --accent-bg:#1e3750;
  --ok:#86d3a6; --ok-bg:#16362a; --warn:#e0bd7a; --warn-bg:#3b2f15;
  --late:#ff9e95; --late-bg:#46201d; --mute-bg:#213447; --lift:0 10px 30px rgba(0,0,0,.5);
}

body{ font-family:var(--body); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; }
.wrap{ gap:16px; padding-block:4px calc(112px + env(safe-area-inset-bottom,0px)); }

/* ---------- Haut de page : logo, compte, titre d'écran ---------- */
#nl-bar{ padding-top:12px; }
#nl-bar .logo{ height:26px; width:auto; display:block; }
#nl-bar .avatar{ width:38px; height:38px; min-height:0; padding:0; border-radius:50%; border:0; background:var(--navy); color:var(--cream); font:600 16px var(--display); display:grid; place-items:center; cursor:pointer; }
#nl-bar .menu{ position:absolute; right:16px; top:calc(100% + 6px); z-index:30; min-width:230px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--lift); }
#nl-bar .menu[hidden]{ display:none; }
#nl-bar .who{ padding:10px 12px 8px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
#nl-bar .menu button{ width:100%; min-height:44px; text-align:left; background:none; border:0; border-radius:10px; color:var(--ink); font:600 16px var(--body); padding:10px 12px; }
#nl-bar .menu button:hover{ background:var(--mute-bg); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo{ filter:brightness(0) invert(.93); } }
:root[data-theme="dark"] .logo{ filter:brightness(0) invert(.93); }

header{ gap:2px 12px; padding-top:6px; }
h1{ font-family:var(--display); font-weight:600; font-size:34px; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
header .sub{ order:3; flex:1 1 100%; font-size:15px; color:var(--muted); }
header #today{ margin-left:0; flex:1 1 100%; }
header #today::first-letter{ text-transform:uppercase; }
header .last{ display:none; }
header .net{ order:2; margin-left:auto; align-self:center; font-size:13px; }

/* ---------- Barre du bas ---------- */
.tabs{ left:0; right:0; bottom:0; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); gap:0;
  background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); }
.tabs button{ border-radius:0; background:none !important; min-height:54px; font-size:11px; font-weight:500; letter-spacing:0; color:var(--muted); gap:3px; }
.tabs button[aria-current="page"]{ color:var(--accent); font-weight:700; }
.tabs button[aria-current="page"]::before{ content:""; position:absolute; top:-7px; left:50%; width:28px; height:3px; margin-left:-14px; border-radius:0 0 3px 3px; background:var(--gold); }
.tabs .ic{ display:flex; width:26px; height:26px; align-items:center; justify-content:center; }
.tabs .ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tabs button b{ top:2px; right:calc(50% - 24px); font-family:var(--body); font-size:11px; line-height:17px; padding:0 5px; }
.toast{ bottom:calc(88px + env(safe-area-inset-bottom,0px)); border-radius:var(--rs); font-size:15px; }

/* ---------- Titres de section ---------- */
h2{ font-family:var(--body); font-size:15px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); }
.group > h2{ font-size:13px; font-weight:600; color:var(--muted); margin:6px 0 -2px 8px; }
.group.late > h2{ color:var(--late); }
.sec h3{ font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted); margin:0 0 8px; }
.lbl{ text-transform:none; letter-spacing:0; }

/* ---------- Tuiles et panneaux ---------- */
.panel,.tile{ border-radius:var(--r); border-color:var(--line); }
.tile{ padding:14px 16px; }
.tile b{ font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.01em; }
.tile span{ font-size:14px; }
.tile.alert{ border-color:var(--late); }
.panel{ padding:16px; }

/* ---------- Liste des prospects : liste groupée à la façon iOS ---------- */
.group{ gap:0; }
.group.late > details.p{ border-color:var(--line); }
.group > details.p, .group > .group > details.p{ background:var(--surface); border:0; border-bottom:1px solid var(--line); border-radius:0; border-left:0; }
.group > h2 + details.p, .group > details.p:first-child, .group > details.g > .group > details.p:first-child{ border-top-left-radius:var(--r); border-top-right-radius:var(--r); }
.group > details.p:last-child{ border-bottom:0; border-bottom-left-radius:var(--r); border-bottom-right-radius:var(--r); }
.group > h2 + details.p:last-child{ border-radius:var(--r); }
.group > details.p:only-child{ border-radius:var(--r); }
details.g > summary{ margin:0 0 8px 8px; }
details.p > summary{ display:grid; grid-template-columns:46px 1fr 12px; column-gap:12px; align-items:start; padding:14px 16px; }
details.p > summary > div{ grid-column:2; min-width:0; }
details.p > summary > div.last{ display:none; }
details.p > summary > .av{ grid-column:1; grid-row:1 / span 4; }
details.p > summary > .chv{ grid-column:3; grid-row:1 / span 4; align-self:center; width:8px; height:8px; border-right:2px solid var(--muted); border-top:2px solid var(--muted); transform:rotate(45deg); opacity:.55; }
details.p > summary .top{ flex-direction:column; align-items:flex-start; gap:5px; }
details.p > summary .name{ font-size:17px; font-weight:600; letter-spacing:-.005em; line-height:1.25; }
details.p > summary .name small{ display:block; font-size:14px; font-weight:400; color:var(--muted); }
details.p > summary .line{ margin-top:4px; flex-wrap:wrap; gap:6px 8px; align-items:flex-start; }
details.p > summary .line .act{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1 1 100%; font-size:14px; color:var(--muted); }
.av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font:600 16px var(--display); background:var(--accent-bg); color:var(--accent); }
.av.warn{ background:var(--warn-bg); color:var(--warn); }
.av.mute{ background:var(--mute-bg); color:var(--muted); }
.av.lg{ width:68px; height:68px; font-size:24px; }
.pill{ font-size:12.5px; font-weight:600; padding:3px 10px; }
.due{ font-family:var(--body); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; padding:2px 9px; border-radius:999px; }
.adv{ border-radius:999px; font-weight:600; padding:3px 10px; }

/* ---------- Filtres ---------- */
.chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; min-height:38px; padding:7px 15px; border-radius:999px; font:600 14px var(--body); background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } }
.filters label.fld{ font-size:13px; font-weight:500; }
input,select,textarea{ border-radius:var(--rs); border:1px solid var(--line); background:var(--surface); font-family:var(--body); font-size:16px; padding:11px 12px; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color:var(--accent); outline-offset:1px; }

/* ---------- Boutons ---------- */
button.small,a.btnlink,label.btnfile,#addForm button,form button[type=submit]{ border-radius:var(--rs); min-height:44px; padding:10px 16px; font:600 15px var(--body); display:inline-flex; align-items:center; justify-content:center; }
button.ghost, label.btnfile{ background:var(--accent-bg); border-color:transparent; color:var(--accent); }
a.btnlink{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); text-decoration:none; }
.linkbtn{ font-weight:600; }

/* ---------- Calendrier et liste du jour ---------- */
#todayPanel{ background:none; border:0; padding:0; gap:14px; }
#cal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.cal .calh b{ font-family:var(--display); font-size:19px; font-weight:600; }
.cal .calh button{ border-radius:50%; width:40px; height:40px; min-height:0; padding:0; background:var(--accent-bg); border:0; color:var(--accent); }
.cal .d{ aspect-ratio:auto; height:44px; min-height:0; border-radius:50%; }
.cal .d.today{ border-color:var(--gold); }
.cal .d.sel{ background:var(--navy); color:#fff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cal .d.sel{ background:var(--accent); color:var(--on-accent); } }
#todayTitle{ font-size:15px; margin:0 2px; }
.today-list{ gap:10px; }
.today-list li{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; gap:8px; }
.today-list li.late{ border-color:var(--line); box-shadow:inset 4px 0 0 var(--late); }
.today-list li.tdh{ background:none; border:0; box-shadow:none; padding:10px 2px 0; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; }
.today-list .who .linkbtn{ color:var(--ink); text-decoration:none; font-size:17px; }
.today-list .what{ color:var(--muted); font-size:15px; }

/* ---------- Fiche plein écran ---------- */
.fiche{ background:var(--bg); }
.fbar{ background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:0; padding-bottom:6px; }
.fbar .back{ color:var(--accent); font-weight:600; font-size:17px; padding:8px 6px; }
.fbar .ftitle{ opacity:0; }
.ftabs{ margin:6px 16px 0; padding:3px; gap:2px; background:var(--mute-bg); border:0; border-radius:12px; position:sticky; top:calc(var(--host-top) + 52px + env(safe-area-inset-top,0px)); }
.ftabs button{ border:0; border-radius:9px; padding:9px 2px; font-size:14px; font-weight:600; color:var(--muted); background:none; }
.ftabs button[aria-current="page"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(24,43,63,.14); }
.fbody{ gap:18px; padding-top:16px; }
.fsec{ display:flex; flex-direction:column; gap:16px; }
.fsec[hidden]{ display:none !important; }
.hero{ display:flex; gap:16px; align-items:center; }
.hid{ min-width:0; }
.hname{ font-family:var(--display); font-weight:600; font-size:27px; line-height:1.15; letter-spacing:-.015em; color:var(--ink); overflow-wrap:anywhere; }
.hsub{ font-size:15px; color:var(--muted); margin-top:3px; }
.acts3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; }
.qact{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 12px; border-radius:16px; background:var(--surface); border:1px solid var(--line); color:var(--accent); font:600 14px var(--body); text-decoration:none; }
.qact svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fbody .sec{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.fbody .sec .next > span:first-child{ font-size:17px; font-weight:500; flex:1 1 100%; }
.fbody .quick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fbody .quick > button{ width:100%; min-height:46px; }
.fbody .quick > button[hidden]{ display:none; }
.coords{ gap:0; }
.coords li + li{ border-top:1px solid var(--line); }
.coords button{ background:none; border:0; border-radius:0; padding:12px 0; font:500 15px var(--body); font-variant-numeric:tabular-nums; color:var(--ink); }
.coords button::after{ background:var(--accent-bg); padding:3px 10px; border-radius:999px; font-size:12px; }
.sec ul.coords{ padding-left:0; }
details.manual > summary{ padding:8px 0; color:var(--accent); font-weight:600; }
.content{ border-radius:var(--rs); }
.empty{ border-radius:var(--r); }

/* ---------- Connexion ---------- */
#nl-login{ background:var(--bg); }
#nl-login form{ border-radius:24px; padding:32px 24px 28px; gap:14px; border:1px solid var(--line); box-shadow:var(--lift); align-items:stretch; }
#nl-login .logo{ height:40px; width:auto; align-self:center; }
#nl-login h1{ font-size:30px; text-align:center; margin:2px 0 0; }
#nl-login .sous{ margin:0 0 6px; text-align:center; color:var(--muted); }
#nl-login .sous:empty{ display:none; }
#nl-login input{ min-height:48px; }
#nl-login button[type=submit]{ min-height:52px; border-radius:14px; font-size:16px; }
#nl-login .ghost{ background:none; color:var(--muted); text-decoration:underline; min-height:40px; font-weight:500; }

/* ---------- Calendrier replié sous les actions ---------- */
#calBox{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
#calBox > summary{ padding:14px 16px; font-weight:600; color:var(--accent); display:flex; align-items:center; justify-content:space-between; }
#calBox > summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
#calBox[open] > summary::after{ transform:rotate(225deg); }
#calBox > #cal{ border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r) var(--r); }

/* ---------- Point à 15 jours ---------- */
.p15{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background:var(--warn-bg); color:var(--warn); font-weight:600; font-size:15px; }
.p15 .quick{ display:flex; gap:8px; }
.p15 .quick button{ flex:1 1 0; }

/* ---------- Avant d'appeler ---------- */
details.aide{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 16px; }
details.aide > summary{ padding:14px 0; font-weight:600; color:var(--accent); display:flex; align-items:center; justify-content:space-between; }
details.aide > summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
details.aide[open] > summary::after{ transform:rotate(225deg); }
details.aide ul{ margin:0; padding:0 0 14px 18px; display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.45; }
details.aide b{ font-weight:600; }

/* ---------- Appel : confirmation au second toucher ---------- */
a[href^="tel:"].armed{ background:var(--gold); border-color:var(--gold); color:var(--navy2); }
a[href^="tel:"].armed{ display:inline-flex; flex-direction:column; gap:2px; line-height:1.2; }
a[href^="tel:"].armed b{ font-size:16px; font-variant-numeric:tabular-nums; }
a[href^="tel:"].armed span{ font-size:12px; font-weight:500; opacity:.85; }

/* ---------- « Suivant » dans le toast ---------- */
.toast{ display:flex; flex-direction:column; gap:10px; align-items:stretch; text-align:center; }
.toast[hidden]{ display:none; }
.toast .nl-next{ background:var(--gold); border:0; color:var(--navy2); border-radius:10px; min-height:44px; font-weight:700; }

/* ---------- Hors ligne ---------- */
#nl-offline{ position:fixed; left:0; right:0; top:0; z-index:40; background:var(--late); color:#fff; font-size:14px; font-weight:600; text-align:center; padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px; }
#nl-offline[hidden]{ display:none; }

/* ---------- Onglet Plus ---------- */
#comptePanel .quick button, #aidePanel a{ color:var(--accent); }
#diag{ font-size:12px !important; color:var(--muted); opacity:.7; padding:0 16px; }
#diag.offtab{ display:none !important; }

/* ---------- Aujourd'hui : sous-titre et actions sur une ligne ---------- */
#todayTitle{ font-size:15px; font-weight:500; color:var(--muted); margin:0 2px; }
.today-list .acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.today-list .acts > *{ width:100%; }
.today-list .acts a.btnlink{ grid-column:1 / -1; }
.today-list .acts a.btnlink:only-child, .today-list .acts > button:only-child{ grid-column:1 / -1; }

/* ---------- Onglet Plus : ordre des cartes ---------- */
#comptePanel{ order:1; } #modeles{ order:2; } #backup{ order:3; margin-top:0 !important; } #aidePanel{ order:4; }
#modeles > details.manual{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 16px; }
#modeles > details.manual > summary{ padding:16px 0; font-weight:600; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; font-size:15px; }
#modeles > details.manual > summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); flex:0 0 auto; transition:transform .15s; }
#modeles > details.manual[open] > summary::after{ transform:rotate(225deg); }
#modeles > details.manual[open]{ padding-bottom:14px; }
#aidePanel p + p{ margin-top:6px !important; }
#calBox > summary{ flex-direction:row; }
.today-list .acts > *{ box-sizing:border-box; }
#modeles{ margin-top:0 !important; }
details.aide > summary{ flex-direction:row; }
/* Onglet Infos : formulaire */
details.infos{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 16px 4px; }
details.infos > summary{ padding:14px 0; font-weight:600; color:var(--accent); display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
details.infos > summary::after{ content:""; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
details.infos[open] > summary::after{ transform:rotate(225deg); }
details.infos form{ background:none; padding:0 0 12px; }
/* Rappel de l'expéditeur sous un mail rédigé */
.rappel-exp{ margin:0; font-size:14px; color:var(--warn); background:var(--warn-bg); border-radius:10px; padding:8px 12px; }