/* Style « appli iPhone » : police système, grands titres, barres translucides, listes groupées arrondies.
   Les couleurs de la marque (--ink, --accent, --bg) viennent de config/brand.mjs. */
:root{--ink:#111;--accent:#FFD400;--bg:#F2F2F7;--card:#fff;--line:rgba(60,60,67,.14);--muted:rgba(60,60,67,.62);--soft:rgba(60,60,67,.85);--fill:rgba(120,120,128,.13);--fill2:rgba(120,120,128,.2);
  --bad:#D70015;--ok:#1E8E3E;--red:#FF3B30;--r:14px;
  --label:#111;--strong:#111;--on-strong:#fff;--bar:rgba(249,249,249,.82);--seg-on:#fff;--hud:rgba(250,250,250,.94);--warn-bg:#FFF4D6;--alert-bg:#FFE5E3;--alert-fg:#8A0010;--grab:rgba(60,60,67,.3);
  --sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.32,.72,0,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html{font-size:17px;-webkit-text-size-adjust:100%}html.big{font-size:20.5px}
body{margin:0;background:var(--bg);color:var(--label);font:1rem/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;letter-spacing:inherit}
input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
[hidden]{display:none!important}
button:active,.btn:active{opacity:.6}
a{color:inherit}

/* connexion : clavier façon code de l'iPhone */
.login{min-height:100dvh;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:calc(var(--st) + 3.2rem) 2rem calc(var(--sb) + 2rem)}
.logo{background:var(--accent);color:var(--ink);font-weight:800;font-size:2.1rem;padding:.6rem 1.1rem;border-radius:16px}
.logo.img{padding:1rem 1.25rem;border-radius:22px;line-height:0}.logo.img img{width:6.6rem;height:auto;display:block}
.login .tag{font-size:1.2rem;font-weight:600;margin-top:-.9rem}
.login p{margin:0;font-size:1.18rem;font-weight:400;text-align:center}
.dots{display:flex;gap:1.1rem}.dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #fff}.dots i.f{background:#fff}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.4rem;width:min(290px,100%);justify-items:center}
.pad button{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:2.05rem;font-weight:400;transition:background .12s}
.pad button:active{background:rgba(255,255,255,.42);opacity:1}
.pad button.txt{background:none;font-size:.95rem}
.login .err{min-height:1.5em;color:var(--accent);font-weight:600;text-align:center}
.setup{display:grid;gap:.7rem;width:min(330px,100%)}
.setup input{padding:.85rem .95rem;border-radius:12px;border:0;font-size:1.05rem;color:#111;background:#fff;caret-color:#111;width:100%}.setup input::placeholder{color:#8E8E93}
.setup label{font-size:.8rem;font-weight:500;color:rgba(235,235,245,.7);margin-bottom:-.35rem;padding-left:.2rem}

/* bienvenue (première connexion) */
.welcome{min-height:100dvh;background:var(--card);display:flex;flex-direction:column;padding:calc(var(--st) + 3.4rem) 1.8rem calc(var(--sb) + 1.4rem);max-width:560px;margin:0 auto;animation:fade .35s ease}
.welcome h1{font-size:2.05rem;line-height:1.12;font-weight:800;letter-spacing:-.03em;margin:0 0 2.2rem;text-align:center}.welcome h1 span{display:block;color:var(--muted);font-weight:700}
.welcome ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.55rem;flex:1}
.welcome li{display:flex;gap:1rem;align-items:center;opacity:0;animation:rise .5s var(--ease) forwards}
.welcome li i{width:2.75rem;height:2.75rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.welcome li i svg{width:1.55rem;height:1.55rem}
.welcome li b{display:block;font-size:.95rem;font-weight:600}.welcome li span{display:block;font-size:.9rem;color:var(--muted);line-height:1.3}
.welcome .foot{font-size:.75rem;color:var(--muted);text-align:center;margin:1.4rem 0 1rem;line-height:1.35}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}

/* barre du haut : grand titre, translucide */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  padding:calc(var(--st) + .55rem) calc(var(--sr) + 1.1rem) .6rem calc(var(--sl) + 1.1rem);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.35rem .7rem;border-bottom:.5px solid var(--line)}
header .mk{width:1.9rem;height:1.9rem;border-radius:.5rem;background:var(--accent);display:flex;align-items:center;justify-content:center}header .mk img{width:1.35rem;height:auto}
header .acts2{grid-column:3;display:flex;gap:.9rem;align-items:center}
header .out{color:var(--label);font-size:1rem;font-weight:400;padding:.3rem 0}
header .help{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--fill);font-weight:600;font-size:.95rem}
header .h{grid-column:1/-1;min-width:0;display:flex;flex-direction:column-reverse;gap:.1rem}
header h1{margin:0;font-size:2rem;line-height:1.1;font-weight:800;letter-spacing:-.03em}
header small{display:block;color:var(--muted);font-weight:400;font-size:.82rem;line-height:1.3}
.notif{background:var(--card);margin:.8rem calc(var(--sr) + 1rem) 0 calc(var(--sl) + 1rem);border-radius:var(--r);padding:.75rem .9rem;display:flex;gap:.7rem;align-items:center;font-size:.9rem}.notif span{flex:1}
main{padding:.9rem calc(var(--sr) + 1rem) calc(var(--sb) + 10.5rem) calc(var(--sl) + 1rem);display:flex;flex-direction:column;gap:.75rem;max-width:1200px;margin:0 auto;animation:fade .22s ease}

/* barre d'onglets */
nav.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:.3rem calc(var(--sr) + .2rem) calc(var(--sb) + .15rem) calc(var(--sl) + .2rem)}
nav.bnav button{height:3rem;font-size:.6rem;font-weight:500;color:#8E8E93;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;position:relative;letter-spacing:0}
nav.bnav button svg{width:1.55rem;height:1.55rem}
nav.bnav button.on{color:var(--label)}nav.bnav button.on svg{stroke-width:2.2}
nav.bnav .badge{position:absolute;top:-.05rem;left:calc(50% + .35rem);margin:0}
.badge{background:var(--red);color:#fff;font-size:.68rem;font-weight:600;min-width:1.1rem;height:1.1rem;line-height:1.1rem;padding:0 .3rem;border-radius:.55rem;margin-left:.35rem;display:inline-block;text-align:center}

/* sélecteur à segments */
.seg{display:flex;gap:0;background:var(--fill);border-radius:9px;padding:2px;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;min-height:2rem;padding:0 .75rem;border-radius:7px;font-size:.8rem;font-weight:500;white-space:nowrap;transition:background .2s}
.seg button.on{background:var(--seg-on);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.sec{font-size:.78rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:.55rem 0 -.2rem .9rem}
.fab{position:fixed;z-index:25;left:calc(var(--sl) + 1rem);right:calc(var(--sr) + 1rem);bottom:calc(var(--sb) + 4.1rem);height:3rem;border-radius:var(--r);background:var(--strong);color:var(--on-strong);font-size:1rem;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.22);max-width:520px;margin:0 auto}

/* cartes */
.card{background:var(--card);border-radius:var(--r);padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
.card.hot{box-shadow:inset 0 0 0 2px var(--accent)}
.card .top{display:flex;gap:.75rem}
.thumb{width:5.4rem;height:5.4rem;border-radius:10px;object-fit:cover;background:var(--fill);flex-shrink:0}
.thumbs{display:flex;gap:.45rem;flex-wrap:wrap}.thumbs .thumb{width:4.2rem;height:4.2rem}
.pdf{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bad);font-size:.8rem;text-decoration:none}
.card .t{font-size:1rem;font-weight:600;line-height:1.3;margin:0;overflow-wrap:anywhere}
.card .n{font-size:.9rem;line-height:1.4;color:var(--soft);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.meta{font-size:.78rem;color:var(--muted);line-height:1.35}.orig{font-size:.78rem;color:var(--muted);font-style:italic}
.kind{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chip{font-size:.72rem;font-weight:600;padding:.22rem .55rem;border-radius:1rem;white-space:nowrap;background:var(--fill);color:var(--soft)}
.chip.dark{background:var(--strong);color:var(--on-strong)}.chip.yel{background:var(--accent);color:#111}
.box{border-radius:10px;padding:.6rem .75rem;font-size:.88rem;background:var(--bg);white-space:pre-wrap;overflow-wrap:anywhere}.box.warn{background:var(--strong);color:var(--on-strong);font-weight:500}
.chk{border-radius:10px;padding:.55rem .7rem;font-size:.88rem;line-height:1.4;background:var(--bg)}.chk.attention{background:var(--warn-bg)}.chk.alerte{background:var(--alert-bg);color:var(--alert-fg);font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.88rem}.kv span{color:var(--muted)}.kv b{font-weight:500;overflow-wrap:anywhere}
.bar{height:.5rem;border-radius:.25rem;background:var(--fill);overflow:hidden}.bar i{display:block;height:100%;background:var(--label);border-radius:.25rem;transition:width .5s var(--ease)}.bar.ok i{background:var(--ok)}
ul.pts{margin:0;padding-left:1.2rem;font-size:.9rem;line-height:1.5}
.cmts{display:flex;flex-direction:column;gap:.35rem}.cmt{font-size:.86rem;background:var(--bg);border-radius:1rem;padding:.45rem .75rem;align-self:flex-start;max-width:100%}.cmt b{font-size:.76rem}.cmt span{font-size:.72rem;color:var(--muted)}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}
.btn{min-height:2.95rem;border-radius:var(--r);background:var(--fill);font-size:1rem;font-weight:600;padding:0 .9rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;color:var(--label);transition:opacity .12s}
.btn.y{background:var(--accent);color:#111}.btn.k{background:var(--strong);color:var(--on-strong)}
.btn.s{min-height:2.05rem;font-size:.82rem;font-weight:500;border-radius:1.05rem;padding:0 .8rem}
.btn.danger{color:var(--bad)}.btn:disabled{opacity:.35}.btn.wide{width:100%}
.hero{background:var(--card);border-radius:var(--r);padding:.95rem 1rem;display:flex;flex-direction:column;gap:.4rem;box-shadow:inset 0 0 0 2px var(--accent)}.hero b{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}.hero div{font-size:.9rem;line-height:1.45}.hero small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}

/* listes groupées */
.list{background:var(--card);border-radius:var(--r);overflow:hidden}
.list>*{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.72rem 1rem;width:100%;text-align:left;position:relative}
.list>*+*::before{content:"";position:absolute;left:1rem;right:0;top:0;border-top:.5px solid var(--line)}
.list b{font-size:1rem;font-weight:400}.list small{font-size:.8rem;color:var(--muted);line-height:1.35}
.empty{text-align:center;padding:2.6rem 1rem;color:var(--muted);font-size:.9rem}.empty b{display:block;font-size:1.25rem;font-weight:700;color:var(--label);margin-bottom:.3rem;letter-spacing:-.02em}

/* feuilles qui montent du bas */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s ease}
.sheet{background:var(--bg);width:100%;max-width:600px;max-height:93dvh;overflow:auto;border-radius:20px 20px 0 0;padding:1.5rem 1rem calc(var(--sb) + 1.1rem);display:flex;flex-direction:column;gap:.85rem;animation:up .42s var(--ease);position:relative}
.sheet::before{content:"";position:absolute;top:.4rem;left:50%;width:2.2rem;height:.3rem;margin-left:-1.1rem;border-radius:.15rem;background:var(--grab)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;padding-right:2.6rem}
.sheet .x{position:absolute;right:0;top:-.15rem;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--fill2);font-size:.8rem;font-weight:700;color:var(--muted)}
.sheet>div.rel{position:relative;height:0}
label.l{display:block;font-size:.76rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:0 0 .3rem .85rem}
.f input[type=text],.f input[type=tel],.f input[type=url],.f input[type=date],.f input[type=time],.f input[type=number],.f textarea,.f select{width:100%;border:0;background:var(--card);border-radius:12px;padding:.72rem .9rem;font-size:1rem;outline:none;-webkit-appearance:none;appearance:none;min-height:2.75rem}
.f input:focus,.f textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.f textarea{min-height:5.2rem;resize:vertical}
.picks{display:flex;flex-wrap:wrap;gap:.4rem}.pick{min-height:2.1rem;padding:0 .8rem;border-radius:1.05rem;background:var(--card);font-size:.85rem;font-weight:500;transition:background .15s}.pick.on{background:var(--strong);color:var(--on-strong);font-weight:600}
.sheet .card{background:var(--card)}.card .pick,.card .f input,.card .f textarea{background:var(--bg)}
.bigphoto{width:100%;min-height:8.5rem;border:1.5px dashed rgba(60,60,67,.35);border-radius:var(--r);background:var(--card);font-size:1.05rem;font-weight:600}
.addpic{width:4.2rem;height:4.2rem;border:1.5px dashed rgba(60,60,67,.35);border-radius:10px;background:var(--card);font-size:.7rem;font-weight:500;color:var(--muted)}
.pw{position:relative}.pw button{position:absolute;right:-6px;top:-6px;width:1.4rem;height:1.4rem;border-radius:50%;background:rgba(60,60,67,.85);color:#fff;font-size:.7rem}
.tog{display:flex;align-items:center;gap:.7rem;font-weight:400;min-height:2.75rem;background:var(--card);border-radius:12px;padding:0 .9rem;margin-bottom:.35rem}
.tog input{-webkit-appearance:none;appearance:none;width:3rem;height:1.82rem;border-radius:1rem;background:rgba(120,120,128,.28);position:relative;transition:background .2s;flex-shrink:0;order:2;margin:0 0 0 auto;cursor:pointer}
.tog input::after{content:"";position:absolute;top:2px;left:2px;width:calc(1.82rem - 4px);height:calc(1.82rem - 4px);border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .22s var(--ease)}
.tog input:checked{background:#34C759}.tog input:checked::after{transform:translateX(1.18rem)}
.mic{position:absolute;right:.45rem;bottom:.5rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--accent);color:#111;display:flex;align-items:center;justify-content:center}.mic svg{width:1.3rem;height:1.3rem}.mic.on{background:var(--red);color:#fff}.relm{position:relative}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 8.5rem);transform:translateX(-50%);z-index:90;background:rgba(40,40,42,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:.65rem 1.1rem;border-radius:1.4rem;font-weight:500;font-size:.9rem;max-width:90vw;text-align:center;animation:rise .3s var(--ease)}
.bigmsg{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);animation:fade .15s ease}
.bigmsg div{background:var(--hud);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-radius:22px;padding:1.6rem 1.5rem;text-align:center;max-width:300px;min-width:190px;display:flex;flex-direction:column;gap:.5rem;align-items:center;animation:pop .32s var(--ease)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.bigmsg i{width:3.6rem;height:3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-style:normal;font-weight:700;background:var(--accent);color:#111}.bigmsg.ko i{background:var(--red);color:#fff}.bigmsg b{font-size:1.05rem;font-weight:600}.bigmsg span{font-size:.85rem;color:var(--muted)}
.viewer{position:fixed;inset:0;z-index:99;background:#000;display:flex;align-items:center;justify-content:center;animation:fade .2s ease}.viewer img{max-width:100%;max-height:100%}.viewer button{position:absolute;top:calc(var(--st) + .8rem);right:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-weight:700}
.spin{width:1.05rem;height:1.05rem;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-.15em}@keyframes sp{to{transform:rotate(360deg)}}

/* tablette et ordinateur : cartes en colonnes, feuilles centrées */
@media (min-width:820px){main.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-items:start}main.grid>.sec,main.grid>.list,main.grid>.dsearch,main.grid>.seg,main.grid>.hero,main.grid>.empty,main.grid>.meta{grid-column:1/-1}
  .overlay{align-items:center}.sheet{border-radius:20px;animation:pop .3s var(--ease)}.sheet::before{display:none}
  nav.bnav{justify-content:center;grid-auto-columns:7.5rem}}
/* mode sombre : suit le réglage de l'iPhone ou du Mac */
@media (prefers-color-scheme:dark){
  :root{--bg:#000;--card:#1C1C1E;--line:rgba(84,84,88,.6);--muted:rgba(235,235,245,.6);--soft:rgba(235,235,245,.82);--fill:rgba(120,120,128,.26);--fill2:rgba(120,120,128,.36);
    --bad:#FF453A;--ok:#30D158;--red:#FF453A;--label:#fff;--strong:#fff;--on-strong:#000;--bar:rgba(22,22,24,.82);--seg-on:#636366;--hud:rgba(44,44,46,.94);--warn-bg:#3A2E00;--alert-bg:#4A1210;--alert-fg:#FFB4AD;--grab:rgba(235,235,245,.3)}
  .sheet{--bg:#1C1C1E;--card:#2C2C2E}
  .welcome{background:#000}
  .fab{box-shadow:0 8px 22px rgba(0,0,0,.6)}
  .seg button.on{box-shadow:none}
  .f input,.f textarea,.f select{color-scheme:dark}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.dsearch{width:100%;min-height:2.6rem;border:0;border-radius:12px;padding:0 .9rem;font:inherit;background:var(--card);color:var(--label)}
.card[hidden]{display:none}

header .probbtn{min-height:1.9rem;padding:0 .7rem;border-radius:1rem;background:var(--alert-bg);color:var(--alert-fg);font-weight:600;font-size:.85rem}
