/* ═══════════ tokens ═══════════ */
:root{
  --ink:#0C1611;
  --ink-2:#1A2A22;
  --ink-3:#28392F;
  --leaf:#8FD16A;
  --leaf-dp:#3F7A2C;
  --sap:#D9F2BC;
  --bg:#F5F7F2;
  --card:#FFFFFF;
  --line:#E2E6DD;
  --line-2:#EDEFE9;
  --muted:#6E7A72;
  --bleu:#3D7EA6;
  --rouge:#B04141;
  --ambre:#C88A2E;

  --btn-bg:#0C1611;
  --btn-txt:#FFFFFF;
  --sur-sombre:#FFFFFF;
  --ombre-forte:rgba(12,22,17,.35);

  --f-disp:"Schibsted Grotesk",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.9,.25,1);
  --r:16px;
  --r-sm:11px;
  --sh:0 1px 2px rgba(12,22,17,.05),0 12px 28px -20px rgba(12,22,17,.35);

  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}

/* ═══════════ thème sombre ═══════════ */
html[data-theme="sombre"]{
  --ink:#E7EDE4;
  --ink-2:#C2CEBC;
  --ink-3:#A7B5A2;
  --leaf:#93D96F;
  --leaf-dp:#A9E389;
  --sap:#CDEBAE;
  --bg:#0E1714;
  --card:#16231D;
  --line:#28372F;
  --line-2:#1E2C25;
  --muted:#8C9A91;
  --bleu:#6FB4DC;
  --rouge:#E08585;
  --ambre:#E0AE5C;
  --btn-bg:#93D96F;
  --btn-txt:#0B1410;
  --sur-sombre:#0B1410;
  --ombre-forte:rgba(0,0,0,.6);
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 28px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-radius:6px}
::selection{background:var(--sap)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:700;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(1.55rem,1.3rem + 1.2vw,2.1rem)}
h2{font-size:1.22rem}
h3{font-size:1.02rem;font-family:var(--f-body);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 .85rem}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ═══════════ authentification ═══════════ */
.auth-shell{
  min-height:100dvh;display:grid;place-items:center;
  padding:1.2rem;
  padding-top:calc(1.2rem + env(safe-area-inset-top,0px));
  padding-bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(60vw 60vw at 85% -10%,rgba(143,209,106,.2),transparent 60%),
    radial-gradient(50vw 50vw at 0% 110%,rgba(61,126,166,.14),transparent 60%),
    var(--bg);
}
.auth{
  width:100%;max-width:26.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.5rem,5vw,2.3rem);
  box-shadow:0 30px 70px -50px rgba(12,22,17,.6);
  animation:up .55s var(--ease) both;
}
.auth-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--f-disp);font-weight:800;font-size:1.1rem;letter-spacing:-.03em;margin-bottom:1.5rem}
.auth h1{margin-bottom:.3rem}
.auth .sub{color:var(--muted);font-size:.93rem;margin-bottom:1.6rem}
.auth-alt{margin:1.4rem 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.auth-alt a{color:var(--leaf-dp);font-weight:700;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-back{display:inline-block;margin-top:1.1rem;font-size:.86rem;color:var(--muted);text-decoration:none}
.auth-back:hover{color:var(--ink)}

/* ═══════════ formulaires ═══════════ */
.f{margin-bottom:1rem}
.f > label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.4rem}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],input[type=number],select,textarea{
  box-sizing:border-box;max-width:100%;
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem .9rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
textarea{min-height:6.5rem;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{
  outline:none;background:var(--card);
  border-color:var(--leaf-dp);box-shadow:0 0 0 4px rgba(143,209,106,.2);
}
.two{display:grid;gap:.9rem}
.two > *{min-width:0}
.two{margin-bottom:1rem}
.two > .f{margin-bottom:0}
input,select,textarea,button{box-sizing:border-box}
@media (min-width:480px){.two{grid-template-columns:1fr 1fr}}

/* champ mot de passe + œil */
.pw{position:relative}
.pw input{padding-right:3rem}
.pw button{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--muted);
  transition:color .2s,background .2s;
}
.pw button:hover{color:var(--ink);background:var(--line-2)}

/* règles du mot de passe */
.regles{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.35rem}
.regles li{
  display:flex;align-items:center;gap:.55rem;
  font-size:.83rem;color:var(--muted);transition:color .25s;
}
.regles li .tick{
  flex:none;width:17px;height:17px;border-radius:50%;
  border:1.6px solid var(--line);display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s;
}
.regles li .tick svg{opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s var(--ease)}
.regles li.ok{color:var(--leaf-dp);font-weight:600}
.regles li.ok .tick{background:var(--leaf-dp);border-color:var(--leaf-dp)}
.regles li.ok .tick svg{opacity:1;transform:none}

.jauge{height:5px;border-radius:99px;background:var(--line);margin-top:.8rem;overflow:hidden}
.jauge i{display:block;height:100%;width:0;border-radius:99px;background:var(--rouge);transition:width .35s var(--ease),background .35s}
.jauge.n2 i{background:var(--ambre)}
.jauge.n3 i{background:var(--leaf)}
.jauge.n4 i{background:var(--leaf-dp)}

.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--ink-2);margin:1.1rem 0}
.consent input{width:1.1rem;height:1.1rem;flex:none;margin-top:.2rem;accent-color:var(--leaf-dp)}

/* boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.97rem;padding:.85rem 1.4rem;border-radius:99px;
  border:1.5px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-txt);
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,opacity .2s;
}
.btn:hover{background:var(--leaf-dp);border-color:var(--leaf-dp);color:var(--sur-sombre);transform:translateY(-2px);box-shadow:0 14px 26px -18px var(--ombre-forte)}
.btn:active{transform:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;background:var(--ink)}
.btn-w{width:100%}
.btn-2{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-2:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-s{padding:.55rem 1rem;font-size:.86rem}

/* messages système */
.alert{border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.9rem;margin-bottom:1rem;animation:pop .3s var(--ease) both}
.al-err{background:#FAEAEA;color:var(--rouge);border:1px solid #EFC9C9}
.al-ok{background:#E9F6DE;color:var(--leaf-dp);border:1px solid #CDE8B6}
.al-info{background:#E8F1F6;color:var(--bleu);border:1px solid #C9DEEA}

/* ═══════════ barre du haut ═══════════ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  background:var(--verre);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:.7rem clamp(.9rem,3vw,1.8rem);
  padding-top:calc(.7rem + env(safe-area-inset-top,0px));
}
.tb-mark{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--f-disp);font-weight:800;font-size:1.02rem;letter-spacing:-.03em;margin-right:auto}
.tb-mark i{font-style:normal;font-weight:500;color:var(--muted);font-size:.85rem}
.tb-nav{display:none;gap:.15rem}
.tb-nav a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--muted);padding:.45rem .8rem;border-radius:99px;transition:color .2s,background .2s}
.tb-nav a:hover{color:var(--ink);background:var(--line-2)}
.tb-nav a[aria-current]{color:var(--ink);background:var(--card);box-shadow:var(--sh)}
.tb-end{display:flex;align-items:center;gap:.5rem}
.tb-who{display:none;align-items:center;gap:.5rem;font-size:.88rem}
.tb-who b{font-weight:600;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-out{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:50%;border:1.5px solid var(--line);color:var(--muted);
  text-decoration:none;transition:color .2s,border-color .2s,background .2s;
}
.tb-out:hover{color:var(--rouge);border-color:var(--rouge);background:#FAEAEA}
@media (min-width:860px){
  .tb-nav{display:flex}
  .tb-who{display:flex}
}

/* ═══════════ coquille ═══════════ */
.shell{
  max-width:64rem;margin-inline:auto;
  padding:clamp(1rem,3vw,1.8rem) clamp(.9rem,3vw,1.8rem) 6rem;
}
@media (min-width:860px){.shell{padding-bottom:3rem}}
.page-h{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.page-h h1{margin-right:auto}

/* ═══════════ cartes ═══════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-p{padding:clamp(1rem,3vw,1.5rem)}
.card-h{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line-2)}
.card-h h2{margin-right:auto}

.grid{display:grid;gap:.8rem}
@media (min-width:760px){.g2{grid-template-columns:1fr 1fr}}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.stat b{display:block;font-family:var(--f-disp);font-size:1.7rem;font-weight:700;line-height:1}
.stat span{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem}

.vide{text-align:center;color:var(--muted);font-size:.92rem;padding:2.5rem 1rem;border:1px dashed var(--line);border-radius:var(--r);background:var(--card)}
.vide svg{margin:0 auto .7rem;opacity:.35}

/* ═══════════ badges & avatars ═══════════ */
.badge{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;white-space:nowrap}
.b-ok{background:#E3F3D6;color:var(--leaf-dp)}
.b-info{background:#E5EFF6;color:var(--bleu)}
.b-off{background:var(--line-2);color:var(--muted)}
.b-alert{background:#FAEAEA;color:var(--rouge)}

.av{
  flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;
  color:#0C1611;font-weight:700;font-family:var(--f-disp);letter-spacing:-.02em;
  background:var(--line);
}
.av img{width:100%;height:100%;object-fit:cover}
.av-sm{width:2rem;height:2rem;font-size:.72rem}
.av-md{width:2.7rem;height:2.7rem;font-size:.9rem}
.av-lg{width:4.6rem;height:4.6rem;font-size:1.4rem}

/* ═══════════ messagerie ═══════════ */
.chat{
  display:flex;flex-direction:column;min-height:calc(100dvh - 15rem);
  position:relative;
}
.fil{
  display:flex;flex-direction:column;gap:.2rem;flex:1;
  padding:.6rem 0 1.2rem;
}

/* pastille de date */
.jour{
  align-self:center;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;color:var(--leaf-dp);
  background:linear-gradient(135deg,rgba(143,209,106,.22),rgba(143,209,106,.1));
  border:1px solid rgba(143,209,106,.28);
  padding:.28rem .85rem;border-radius:99px;margin:1rem 0 .7rem;
  animation:pop .45s var(--ease) both;
}
.jour svg{opacity:.75}

/* rangée : avatar + bulle */
.rang{display:flex;align-items:flex-end;gap:.5rem;max-width:88%;animation:bulle-in .5s var(--ease) both}
.rang.moi{align-self:flex-end;flex-direction:row-reverse}
.rang.lui{align-self:flex-start}
.rang .av{opacity:0;transition:opacity .25s}
.rang.fin .av{opacity:1}

@keyframes bulle-in{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}

.bul{
  position:relative;padding:.72rem 1rem;font-size:.95rem;line-height:1.5;
  word-break:break-word;border-radius:19px;
  transition:transform .2s var(--ease);
}
.bul p{margin:0;white-space:pre-wrap}
.bul:hover{transform:translateY(-1px)}

/* bulles envoyées */
.b-moi{
  background:linear-gradient(140deg,#24503A 0%,#14291F 100%);
  color:#EAF3E4;border-bottom-right-radius:7px;
  box-shadow:0 10px 22px -16px var(--ombre-forte);
}
html[data-theme="sombre"] .b-moi{background:linear-gradient(140deg,#2C6344 0%,#1B382A 100%)}
.rang.moi:not(.fin) .b-moi{border-bottom-right-radius:19px}

/* bulles reçues */
.b-lui{
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-bottom-left-radius:7px;
  box-shadow:0 8px 20px -18px rgba(12,22,17,.6);
}
.rang.lui:not(.fin) .b-lui{border-bottom-left-radius:19px}

/* liseré vert sur les messages du pro, côté client */
.sp-client .b-lui{border-left:3px solid var(--leaf)}

/* heure : discrète, révélée au survol */
.bul time{
  display:block;font-size:.7rem;margin-top:.3rem;
  opacity:.5;transition:opacity .2s;
}
.rang:hover .bul time{opacity:.85}
.b-moi time{color:#B9CDB0}
.b-lui time{color:var(--muted)}

/* premier message : ruban d'accueil */
.fil-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;text-align:center;color:var(--muted);font-size:.93rem;
  padding:3rem 1.5rem;margin:auto 0;
  border:1px dashed var(--line);border-radius:var(--r);
  background:
    radial-gradient(40% 60% at 50% 0%,rgba(143,209,106,.12),transparent 70%),
    var(--card);
}
.fil-vide svg{opacity:.4}
.fil-vide b{color:var(--ink);font-size:1rem}

/* zone de saisie */
.compose{
  position:sticky;bottom:0;display:flex;gap:.5rem;align-items:flex-end;
  background:var(--bg);
  padding:.9rem 0 .8rem;
}
.compose-in{
  flex:1;display:flex;align-items:flex-end;gap:.4rem;
  background:var(--card);border:1.5px solid var(--line);border-radius:22px;
  padding:.28rem .28rem .28rem .3rem;
  transition:border-color .25s,box-shadow .25s;
}
.compose-in:focus-within{
  border-color:var(--leaf-dp);box-shadow:0 0 0 4px rgba(143,209,106,.18);
}
.compose textarea{
  flex:1;min-height:2.5rem;max-height:8rem;margin:0;padding:.6rem .75rem;
  border:0;background:transparent;border-radius:18px;resize:none;
}
.compose textarea:focus{box-shadow:none;background:transparent}
.envoi{
  flex:none;width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--leaf);color:var(--ink);
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;
}
.envoi:hover{background:var(--leaf-dp);color:#fff;transform:scale(1.07) rotate(-8deg);box-shadow:0 10px 22px -12px rgba(63,122,44,.9)}
.envoi:active{transform:scale(.96)}
.compose-aide{
  font-size:.74rem;color:var(--muted);text-align:center;
  margin:.15rem 0 0;display:none;
}
@media (min-width:860px){.compose-aide{display:block}}
@media (max-width:859px){.compose{bottom:calc(4.3rem + env(safe-area-inset-bottom,0px))}}

/* ═══════════ calendrier ═══════════ */
.cal-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.cal-h strong{font-family:var(--f-disp);font-size:1.1rem;margin-right:auto;text-transform:capitalize}
.cal-nav{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);background:var(--card);text-decoration:none;color:var(--muted);transition:border-color .2s,color .2s}
.cal-nav:hover{border-color:var(--ink);color:var(--ink)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal .dow{text-align:center;font-size:.7rem;font-weight:700;color:var(--muted);padding:.35rem 0;text-transform:uppercase;letter-spacing:.03em}
.cal .d{
  position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:9px;font-size:.85rem;font-weight:600;background:var(--card);border:1px solid var(--line-2);
}
.cal .d.off{background:transparent;border-color:transparent;color:transparent}
.cal .d.today{border-color:var(--ink);border-width:2px;font-weight:800}
.cal .d.st-prevu {background:#FDF0D5;border-color:#E8B23D;color:#7A5410}
.cal .d.st-fait  {background:#E3F3D6;border-color:#6FBF4A;color:#2E5C1C}
.cal .d.st-annule{background:#FAE3E3;border-color:#D96A6A;color:#8A2F2F;text-decoration:line-through}
.cal .pt{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%}
.cal .d.st-prevu  .pt{background:#C8861F}
.cal .d.st-fait   .pt{background:#4C9A2F}
.cal .d.st-annule .pt{background:#C04A4A}

.cal-leg{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.9rem;font-size:.78rem;color:var(--muted)}
.cal-leg span{display:inline-flex;align-items:center;gap:.35rem}
.lg{width:11px;height:11px;border-radius:4px;display:inline-block;border:1.5px solid}
.lg-prevu {background:#FDF0D5;border-color:#E8B23D}
.lg-fait  {background:#E3F3D6;border-color:#6FBF4A}
.lg-annule{background:#FAE3E3;border-color:#D96A6A}
@media (min-width:600px){.cal .d{font-size:.95rem;border-radius:11px}}

.ligne{display:flex;align-items:center;gap:.85rem;padding:.9rem 0;border-top:1px solid var(--line-2)}
.ligne:first-child{border-top:0}
.ligne-d{
  flex:none;width:3rem;text-align:center;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:.3rem 0;line-height:1.1;
}
.ligne-d b{display:block;font-family:var(--f-disp);font-size:1.05rem;font-weight:700}
.ligne-d span{display:block;font-size:.66rem;color:var(--muted);text-transform:uppercase}
.ligne-c{flex:1;min-width:0}
.ligne-c b{display:block;font-weight:700;font-size:.95rem}
.ligne-c span{display:block;font-size:.82rem;color:var(--muted)}
.ligne-m{flex:none;text-align:right;font-weight:700;font-size:.93rem}

/* ═══════════ listes ═══════════ */
.liste{display:grid;gap:.6rem}
.item{
  display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem 1rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;
}
a.item:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--leaf)}
.item-c{flex:1;min-width:0}
.item-c b{display:block;font-weight:700;font-size:.97rem}
.item-c span{display:block;font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-e{flex:none;display:flex;align-items:center;gap:.5rem}
.pastille{min-width:1.3rem;height:1.3rem;display:grid;place-items:center;padding:0 .35rem;border-radius:99px;background:var(--rouge);color:#fff;font-size:.72rem;font-weight:700}

/* ═══════════ onglets ═══════════ */
.tabs{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.9rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  flex:none;text-decoration:none;font-size:.88rem;font-weight:600;color:var(--muted);
  padding:.5rem .95rem;border-radius:99px;border:1.5px solid var(--line);background:var(--card);
  transition:all .2s;
}
.tabs a:hover{color:var(--ink);border-color:var(--ink)}
.tabs a.act{background:var(--btn-bg);color:var(--btn-txt);border-color:var(--btn-bg)}

/* ═══════════ profil ═══════════ */
.pf-top{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.pf-photo{position:relative}
.pf-photo label{
  position:absolute;right:-3px;bottom:-3px;width:1.9rem;height:1.9rem;
  display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;
  cursor:pointer;border:2.5px solid var(--bg);transition:background .2s;
}
.pf-photo label:hover{background:var(--leaf-dp)}
.pf-photo input[type=file]{position:absolute;width:1px;height:1px;opacity:0}

/* ═══════════ barre d'onglets mobile ═══════════ */
.tabbar{
  position:fixed;z-index:50;left:0;right:0;bottom:0;
  display:flex;background:var(--verre);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.6rem .2rem .55rem;text-decoration:none;color:var(--muted);
  font-size:.68rem;font-weight:600;transition:color .2s;
}
.tabbar a.act{color:var(--ink)}
.tabbar a.act svg{stroke:var(--leaf-dp)}
@media (min-width:860px){.tabbar{display:none}}

/* ═══════════ champs obligatoires ═══════════ */
.req{
  color:var(--rouge);text-decoration:none;font-weight:700;
  margin-left:.15rem;font-size:.95em;cursor:help;border:0;
}
.req-note{font-size:.8rem;color:var(--muted);margin:0 0 1.2rem}
.req-note .req{margin:0}

/* accusé de réception après inscription */
.bienvenue{
  background:linear-gradient(135deg,var(--panneau),var(--panneau-2));color:#fff;
  border-radius:var(--r);padding:clamp(1.2rem,4vw,1.8rem);margin-bottom:1.2rem;
  animation:up .5s var(--ease) both;position:relative;overflow:hidden;
}
.bienvenue::after{
  content:"";position:absolute;right:-16%;top:-52%;width:300px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(143,209,106,.3),transparent 62%);
}
.bienvenue h2{color:#fff;font-size:1.3rem;margin-bottom:.5rem;position:relative}
.bienvenue p{color:#B8C7B2;margin:0 0 .9rem;font-size:.94rem;position:relative;max-width:46ch}
.bienvenue ol{margin:0;padding-left:1.1rem;color:#D9E3D5;font-size:.92rem;position:relative}
.bienvenue li{margin-bottom:.3rem}
.bienvenue li::marker{color:var(--leaf);font-weight:700}

/* message sous un champ */
.champ-info{font-size:.8rem;margin:.4rem 0 0;min-height:1rem}
.champ-info.ok{color:var(--leaf-dp);font-weight:600}
.champ-info.ko{color:var(--rouge);font-weight:600}

/* ═══════════ retour au site ═══════════ */
.tb-site{
  display:none;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none;
  padding:.45rem .85rem;border-radius:99px;border:1.5px solid var(--line);
  transition:color .2s,border-color .2s,background .2s;
}
.tb-site:hover{color:var(--ink);border-color:var(--ink);background:var(--card)}
@media (min-width:640px){.tb-site{display:inline-flex}}

/* ═══════════ actions sur une ligne ═══════════ */
.ligne-act{display:flex;gap:.3rem;flex:none;align-items:center}
.mini{
  width:2rem;height:2rem;display:grid;place-items:center;
  border:1.5px solid var(--line);border-radius:9px;background:var(--card);
  color:var(--muted);cursor:pointer;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
}
.mini:hover{color:var(--ink);border-color:var(--ink)}
.mini.sup:hover{color:var(--rouge);border-color:var(--rouge);background:#FAEAEA}

/* formulaire d'édition dépliable */
.edit-box{
  border:1.5px solid var(--leaf);border-radius:var(--r);
  padding:1rem;margin:.6rem 0 1rem;background:rgba(143,209,106,.07);
  animation:pop .35s var(--ease) both;
}
.edit-box h3{margin-bottom:.8rem;font-size:.95rem}

/* ═══════════ accusés de réception ═══════════ */
.bul .meta{display:flex;align-items:center;gap:.3rem;margin-top:.3rem;opacity:.55;transition:opacity .2s}
.rang:hover .bul .meta{opacity:.9}
.bul .meta time{margin:0;opacity:1}
.coches{display:inline-flex;align-items:center;line-height:0}
.coches svg{display:block}
.coches .c2{margin-left:-5px;opacity:0;transform:translateX(-2px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.coches.lu .c2{opacity:1;transform:none}
.coches.lu svg{color:#7FC7F5}
.b-moi .meta{color:#B9CDB0}

/* image dans une bulle */
.bul-img{display:block;margin:-.2rem -.35rem .4rem;border-radius:13px;overflow:hidden;max-width:min(260px,62vw)}
.bul-img img{width:100%;height:auto;display:block;cursor:zoom-in;transition:transform .35s var(--ease)}
.bul-img img:hover{transform:scale(1.02)}
.bul:has(.bul-img){padding:.35rem .4rem .5rem}
.bul:has(.bul-img) p{padding:0 .5rem}
.bul:has(.bul-img) .meta{padding:0 .5rem}

/* visionneuse */
.zoom{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(12,22,17,.92);padding:1.5rem;
  animation:pop .25s var(--ease) both;
}
.zoom.on{display:grid}
.zoom img{max-width:100%;max-height:88vh;border-radius:12px}
.zoom button{
  position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;
  width:2.6rem;height:2.6rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;
}

/* bouton joindre */
.joindre{
  flex:none;width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:color .2s,background .2s;
}
.joindre:hover{color:var(--leaf-dp);background:var(--line-2)}
.joindre input{display:none}

/* aperçu avant envoi */
.apercu{
  display:none;align-items:center;gap:.6rem;
  background:var(--card);border:1.5px solid var(--leaf);border-radius:14px;
  padding:.5rem .6rem;margin-bottom:.5rem;animation:pop .3s var(--ease) both;
}
.apercu.on{display:flex}
.apercu img{width:3rem;height:3rem;object-fit:cover;border-radius:9px}
.apercu span{flex:1;font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apercu button{border:0;background:transparent;color:var(--rouge);cursor:pointer;font-size:.85rem;font-weight:700}

/* ═══════════ constructeur de devis ═══════════ */
.presta-grille{display:grid;gap:.45rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.presta-grille{grid-template-columns:repeat(4,1fr)}}
.presta-grille button{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.75rem .4rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);cursor:pointer;font-size:.78rem;font-weight:600;text-align:center;
  transition:border-color .2s,transform .2s var(--ease),background .2s;
}
.presta-grille button:hover{border-color:var(--leaf);transform:translateY(-2px);background:rgba(143,209,106,.07)}

.saisie{
  display:none;gap:.6rem;align-items:flex-end;flex-wrap:wrap;
  background:rgba(143,209,106,.08);border:1.5px solid var(--leaf);
  border-radius:12px;padding:.9rem;margin-top:.7rem;
  animation:pop .3s var(--ease) both;
}
.saisie.on{display:flex}
.saisie .f{margin:0;flex:1 1 7rem;min-width:6rem}
.saisie .f label{font-size:.76rem}
.saisie input{padding:.55rem .65rem;font-size:15px}

.lignes{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.87rem}
.lignes th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:.5rem .4rem;border-bottom:1.5px solid var(--line);
}
.lignes td{padding:.6rem .4rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.lignes .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lignes tr{animation:pop .3s var(--ease) both}
.lignes .sup-l{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:.2rem}
.lignes .sup-l:hover{color:var(--rouge)}
.total-bar{
  display:flex;align-items:center;gap:.8rem;padding:.9rem .4rem 0;
  font-family:var(--f-disp);font-weight:700;
}
.total-bar span{margin-left:auto;font-size:1.35rem}

/* ═══════════ devis : affichage ═══════════ */
.devis-tab{width:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0}
.devis-tab th{
  background:var(--btn-bg);color:var(--btn-txt);text-align:left;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.6rem .7rem;font-weight:700;
}
.devis-tab th:first-child{border-radius:8px 0 0 8px}
.devis-tab th:last-child{border-radius:0 8px 8px 0}
.devis-tab td{padding:.7rem;border-bottom:1px solid var(--line-2)}
.devis-tab tr:nth-child(even) td{background:rgba(12,22,17,.022)}
.devis-tab .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.devis-total{display:flex;align-items:baseline;gap:1rem;padding:1rem .7rem 0;border-top:2px solid var(--ink);margin-top:-1px}
.devis-total b{margin-left:auto;font-family:var(--f-disp);font-size:1.5rem}
.devis-tva{font-size:.78rem;color:var(--muted);text-align:right;margin:.35rem .7rem 0}

/* ═══════════ signature ═══════════ */
.sign-zone{
  position:relative;background:var(--card);border:2px dashed var(--line);
  border-radius:var(--r);overflow:hidden;touch-action:none;margin-top:.6rem;
  transition:border-color .25s;
}
.sign-zone.rempli{border-style:solid;border-color:var(--leaf)}
.sign-zone canvas{display:block;width:100%;height:170px;cursor:crosshair}
.sign-vide{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  color:var(--muted);font-size:.87rem;text-align:center;padding:1rem;
}
.sign-zone.rempli .sign-vide{display:none}
.sign-actions{display:flex;gap:.5rem;align-items:center;margin-top:.6rem;flex-wrap:wrap}

.accord{
  display:flex;gap:.7rem;align-items:flex-start;background:rgba(143,209,106,.09);
  border:1.5px solid rgba(143,209,106,.35);border-radius:12px;padding:.85rem 1rem;
  font-size:.9rem;margin:1.2rem 0;
}
.accord input{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;accent-color:var(--leaf-dp)}

.signe-bloc{
  background:linear-gradient(135deg,rgba(143,209,106,.16),rgba(143,209,106,.06));
  border:1.5px solid rgba(143,209,106,.4);border-radius:var(--r);
  padding:1.1rem 1.2rem;margin:1rem 0;
}
.signe-bloc b{color:var(--leaf-dp);font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}
.signe-bloc p{margin:.4rem 0 0;font-size:.93rem}
.signe-bloc img{max-width:190px;margin-top:.7rem;border-radius:8px;background:#fff}

/* téléchargements */
.dl{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.dl a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.87rem;font-weight:700;padding:.65rem 1.1rem;border-radius:99px;
  border:1.5px solid var(--line);background:var(--card);
  transition:border-color .2s,transform .2s var(--ease),color .2s;
}
.dl a:hover{border-color:var(--ink);transform:translateY(-2px)}
.dl a.fort{background:var(--ink);color:#fff;border-color:var(--ink)}
.dl a.fort:hover{background:var(--leaf-dp);border-color:var(--leaf-dp)}


/* ═══════════ messagerie : finitions ═══════════ */
.av-pro{background:#0C1611;color:var(--leaf);font-size:.68rem;letter-spacing:.02em}
.av-creux{background:transparent!important;box-shadow:none}

.fil-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;color:var(--muted);font-size:.9rem;padding:2.8rem 1.5rem;margin:auto 0;
  border:1px dashed var(--line);border-radius:var(--r);
  background:radial-gradient(45% 65% at 50% 0%,rgba(143,209,106,.13),transparent 70%),var(--card);
}
.fv-ico{
  width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:50%;
  background:rgba(143,209,106,.16);color:var(--leaf-dp);margin-bottom:.2rem;
}
.fil-vide b{color:var(--ink);font-size:1rem}
.fil-vide span{max-width:30ch;line-height:1.5}

.bul.a-img{padding:.35rem .38rem .45rem}
.bul.a-img p{padding:.25rem .55rem 0}
.bul.a-img .meta{padding:0 .55rem}

.envoi svg{margin-left:1px}

/* ═══════════ notifications ═══════════ */
.notif{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;animation:up .45s var(--ease) both;
}
.notif.neuf{border-color:var(--leaf);background:linear-gradient(135deg,rgba(143,209,106,.1),var(--card))}
.notif-ico{
  flex:none;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:11px;
  background:rgba(143,209,106,.18);color:var(--leaf-dp);
}
.notif.alerte .notif-ico{background:#FAE3E3;color:var(--rouge)}
.notif-c{flex:1;min-width:0}
.notif-c b{display:block;font-size:.95rem}
.notif-c p{margin:.2rem 0 0;font-size:.88rem;color:var(--ink-2);opacity:.85}
.notif-c time{display:block;margin-top:.35rem;font-size:.76rem;color:var(--muted)}
.notif-pt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-top:.5rem}

.tb-nav a .pt-nav,.tabbar a .pt-nav{
  display:inline-grid;place-items:center;min-width:1.05rem;height:1.05rem;padding:0 .25rem;
  border-radius:99px;background:var(--rouge);color:#fff;font-size:.66rem;font-weight:700;
  margin-left:.3rem;vertical-align:middle;
}
.tabbar a{position:relative}
.tabbar .pt-abs{
  position:absolute;top:.35rem;left:calc(50% + .45rem);
  min-width:1.05rem;height:1.05rem;padding:0 .25rem;display:grid;place-items:center;
  border-radius:99px;background:var(--rouge);color:#fff;font-size:.62rem;font-weight:700;
}

/* ═══════════ URSSAF ═══════════ */
.urssaf-h{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.urssaf-h select{width:auto;padding:.5rem .7rem;font-size:.9rem}
.bilan{
  background:linear-gradient(140deg,var(--panneau),var(--panneau-2));color:#fff;
  border-radius:var(--r);padding:clamp(1.2rem,4vw,1.8rem);margin-bottom:1rem;
  position:relative;overflow:hidden;
}
.bilan::after{
  content:"";position:absolute;right:-12%;top:-45%;width:320px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(143,209,106,.28),transparent 62%);
}
.bilan > *{position:relative}
.bilan .eti{font-size:.78rem;color:#A9B8A4;letter-spacing:.03em;text-transform:uppercase}
.bilan .gros{font-family:var(--f-disp);font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem);font-weight:800;line-height:1.05;margin:.3rem 0 .1rem}
.bilan .sous{font-size:.88rem;color:#B9C7B5}
.bilan-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.3rem}
@media (min-width:640px){.bilan-grille{grid-template-columns:repeat(3,1fr)}}
.bilan-grille div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.8rem .9rem}
.bilan-grille b{display:block;font-family:var(--f-disp);font-size:1.3rem;font-weight:700;color:var(--leaf)}
.bilan-grille span{display:block;font-size:.76rem;color:#A9B8A4;margin-top:.15rem}

.tab-mois{width:100%;border-collapse:collapse;font-size:.88rem}
.tab-mois th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.5rem .6rem;border-bottom:1.5px solid var(--line)}
.tab-mois td{padding:.65rem .6rem;border-bottom:1px solid var(--line-2)}
.tab-mois .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-mois tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0;font-size:.95rem}
.avert{
  background:#FDF6E6;border:1px solid #EBD9A8;color:#6B5418;
  border-radius:var(--r-sm);padding:.85rem 1rem;font-size:.85rem;margin-top:1rem;line-height:1.5;
}

/* ═══════════ animations complémentaires ═══════════ */
@keyframes glisse{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes lueur{0%,100%{box-shadow:0 0 0 0 rgba(143,209,106,.45)}50%{box-shadow:0 0 0 7px rgba(143,209,106,0)}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* les cartes de liste entrent en cascade */
.liste > *{animation:up .45s var(--ease) both}
.liste > *:nth-child(1){animation-delay:.02s}
.liste > *:nth-child(2){animation-delay:.06s}
.liste > *:nth-child(3){animation-delay:.1s}
.liste > *:nth-child(4){animation-delay:.14s}
.liste > *:nth-child(5){animation-delay:.18s}
.liste > *:nth-child(n+6){animation-delay:.22s}

.stat{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;animation:up .5s var(--ease) both}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--leaf)}
.stat-vif{
  background:linear-gradient(140deg,var(--panneau),var(--panneau-2));color:#fff;border-color:transparent;
}
.stat-vif b{color:var(--leaf)}
.stat-vif span{color:#A9B8A4}
.stat-alerte{border-color:#E0A94D;background:linear-gradient(140deg,#FDF3E0,var(--card))}
.stat-alerte b{color:#9A6A12}

.card{transition:box-shadow .35s var(--ease)}
.page-h h1{animation:glisse .5s var(--ease) both}
.tabs a{position:relative;overflow:hidden}
.tabs a.act{animation:lueur 2.4s ease-out 1}

/* ═══════════ cloche de la barre ═══════════ */
.tb-cloche{
  position:relative;display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:50%;border:1.5px solid var(--line);color:var(--muted);text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
}
.tb-cloche:hover,.tb-cloche.act{color:var(--ink);border-color:var(--ink);background:var(--card)}
.pt-cloche{
  position:absolute;top:-4px;right:-4px;min-width:1.05rem;height:1.05rem;padding:0 .24rem;
  display:grid;place-items:center;border-radius:99px;background:var(--rouge);color:#fff;
  font-size:.64rem;font-weight:700;animation:lueur 2s ease-out infinite;
}

/* ═══════════ documents (devis / factures) ═══════════ */
.carte-doc{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.carte-doc:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.doc-ico{
  flex:none;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:11px;
}
.doc-ico.ok{background:#E3F3D6;color:var(--leaf-dp)}
.doc-ico.att{background:#FDF0D5;color:#9A6A12}
.doc-ico.off{background:var(--line-2);color:var(--muted)}

.lien-pdf{
  display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;
  font-size:.82rem;font-weight:700;padding:.4rem .8rem;border-radius:99px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  transition:border-color .2s,transform .2s var(--ease),background .2s;
}
.lien-pdf:hover{border-color:var(--ink);transform:translateY(-2px);background:var(--bg)}

.encaisse{
  display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;
  background:rgba(143,209,106,.08);border:1.5px solid rgba(143,209,106,.35);
  border-radius:12px;padding:.8rem;margin-top:.2rem;
}
.encaisse .f{margin:0;flex:1 1 8rem}
.encaisse .f label{font-size:.76rem}
.encaisse input{padding:.5rem .6rem;font-size:15px}

/* ═══════════ attestation fiscale ═══════════ */
.annees{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.annees a{
  text-decoration:none;font-weight:700;font-size:.9rem;padding:.5rem 1.1rem;border-radius:99px;
  border:1.5px solid var(--line);background:var(--card);color:var(--muted);
  transition:all .25s var(--ease);
}
.annees a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.annees a.act{background:var(--btn-bg);color:var(--btn-txt);border-color:var(--btn-bg)}

.attest{
  background:linear-gradient(140deg,var(--panneau),var(--panneau-2));color:#fff;border-radius:var(--r);
  padding:clamp(1.3rem,4vw,2rem);margin-bottom:1rem;position:relative;overflow:hidden;
  animation:up .5s var(--ease) both;
}
.attest::after{
  content:"";position:absolute;right:-14%;top:-50%;width:340px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(143,209,106,.3),transparent 62%);
}
.attest > *{position:relative}
.attest .eti{font-size:.78rem;color:#A9B8A4;letter-spacing:.03em;text-transform:uppercase}
.attest .gros{font-family:var(--f-disp);font-size:clamp(2.2rem,1.5rem + 2.6vw,3.2rem);font-weight:800;line-height:1.04;margin:.3rem 0 .1rem}
.attest .sous{font-size:.9rem;color:#B9C7B5}
.attest-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.3rem 0 1.2rem}
.attest-grille div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.8rem .9rem}
.attest-grille b{display:block;font-family:var(--f-disp);font-size:1.3rem;font-weight:700;color:var(--leaf)}
.attest-grille span{display:block;font-size:.75rem;color:#A9B8A4;margin-top:.15rem}
.btn-attest{
  display:inline-flex;align-items:center;gap:.55rem;background:var(--leaf);color:var(--ink);
  text-decoration:none;font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:99px;
  transition:transform .3s var(--ease),background .25s,box-shadow .3s;
}
.btn-attest:hover{background:var(--sap);transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(143,209,106,.9)}

/* ═══════════ planning admin ═══════════ */
.jour-bloc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1rem,3vw,1.4rem);margin-bottom:1.2rem;box-shadow:var(--sh);
  animation:up .45s var(--ease) both;
}
.jour-tete{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.jour-tete .eti{font-size:.76rem;font-weight:700;color:var(--leaf-dp);text-transform:uppercase;letter-spacing:.04em}
.jour-tete h2{font-size:1.35rem;margin-top:.15rem;text-transform:capitalize}
.jour-tete a{margin-left:auto}
.jour-vide{color:var(--muted);font-size:.92rem;text-align:center;padding:1.8rem 0;margin:0;border:1px dashed var(--line);border-radius:12px}
.jour-liste{display:grid;gap:.55rem}

.passage{border:1.5px solid var(--line);border-radius:13px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.passage[open]{border-color:var(--leaf);box-shadow:0 14px 30px -26px rgba(12,22,17,.6)}
.passage.st-annule{opacity:.62}
.passage summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;
  padding:.75rem .85rem;transition:background .2s;
}
.passage summary::-webkit-details-marker{display:none}
.passage summary:hover{background:var(--bg)}
.pass-h{
  flex:none;min-width:4.2rem;font-size:.78rem;font-weight:700;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.28rem .4rem;text-align:center;
}
.passage.st-prevu  .pass-h{background:#FDF0D5;border-color:#E8B23D;color:#7A5410}
.passage.st-fait   .pass-h{background:#E3F3D6;border-color:#6FBF4A;color:#2E5C1C}
.passage.st-annule .pass-h{background:#FAE3E3;border-color:#D96A6A;color:#8A2F2F}
.pass-c{flex:1;min-width:0}
.pass-c b{display:block;font-size:.95rem}
.pass-c span{display:block;font-size:.83rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pass-e{flex:none;display:flex;align-items:center;gap:.45rem;font-size:.9rem}
.pass-detail{padding:.2rem .85rem 1rem;border-top:1px solid var(--line-2);animation:up .3s var(--ease) both}
.pass-detail dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:.9rem 0 1rem;font-size:.88rem}
.pass-detail dt{color:var(--muted);font-weight:600}
.pass-detail dd{margin:0}
.pass-detail dd a{color:var(--bleu);text-decoration:none;font-weight:600}
.pass-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pass-actions select{width:auto;font-size:.85rem;padding:.5rem .7rem}

.cal-liens{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.cal-liens a{
  text-decoration:none;font-size:.78rem;font-weight:600;padding:.32rem .7rem;border-radius:99px;
  border:1.5px solid var(--line);background:var(--card);color:var(--muted);transition:all .2s;
}
.cal-liens a:hover{border-color:var(--ink);color:var(--ink)}
.cal-liens a.act{background:var(--btn-bg);color:var(--btn-txt);border-color:var(--btn-bg)}

/* calendrier cliquable */
.cal .d{transition:transform .2s var(--ease),filter .2s}
.cal .d:not(.off):hover{transform:scale(1.07);filter:brightness(.97)}
.cal a.d{text-decoration:none;color:inherit}
.cal a.d:hover{border-color:var(--ink)}

/* ═══════════ bascule de thème ═══════════ */
.tb-theme{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:50%;border:1.5px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .3s var(--ease);
}
.tb-theme:hover{color:var(--ink);border-color:var(--ink);background:var(--card);transform:rotate(-15deg)}
.tb-theme .lune{display:none}
html[data-theme="sombre"] .tb-theme .soleil{display:none}
html[data-theme="sombre"] .tb-theme .lune{display:block}

/* ═══════════ tableaux : empilés sur téléphone ═══════════ */
.tab-enveloppe{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-.2rem;padding-inline:.2rem}

@media (max-width:620px){
  .devis-tab,.devis-tab thead,.devis-tab tbody,.devis-tab tr,.devis-tab td,
  .tab-mois,.tab-mois thead,.tab-mois tbody,.tab-mois tr,.tab-mois td{display:block;width:100%}
  .devis-tab thead,.tab-mois thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  .devis-tab tr,.tab-mois tbody tr{
    border:1px solid var(--line);border-radius:12px;background:var(--card);
    padding:.75rem .9rem;margin-bottom:.55rem;
  }
  .devis-tab tr:nth-child(even) td,.tab-mois tr:nth-child(even) td{background:transparent}

  .devis-tab td,.tab-mois tbody td{
    display:flex;align-items:baseline;gap:.8rem;border:0;padding:.2rem 0;text-align:left;
  }
  .devis-tab td::before,.tab-mois tbody td::before{
    content:attr(data-label);flex:none;min-width:5.5rem;
    font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:700;
  }
  .devis-tab td.num,.tab-mois td.num{justify-content:flex-start;text-align:left}
  .devis-tab td:first-child{font-weight:700;font-size:.97rem;padding-bottom:.4rem}
  .devis-tab td:first-child::before{display:none}

  .tab-mois tfoot,.tab-mois tfoot tr,.tab-mois tfoot td{display:block;width:100%}
  .tab-mois tfoot tr{display:flex;justify-content:space-between;padding:.8rem .2rem 0;border-top:2px solid var(--ink)}
  .tab-mois tfoot td{border:0;padding:0}
  .tab-mois tfoot td:empty{display:none}

  .devis-total{flex-wrap:wrap;gap:.4rem}
}

/* ═══════════ composeur : l'aperçu ne chevauche plus ═══════════ */
.compose{flex-direction:column;align-items:stretch;gap:.5rem}
.compose .apercu{margin:0}
.compose-in{width:100%}

/* ═══════════ lisibilité : séparation des blocs ═══════════ */
.shell > h2{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.05rem;margin:1.8rem 0 .8rem;
}
.shell > h2::after{content:"";flex:1;height:1px;background:var(--line)}

.card{border-left:3px solid transparent;transition:border-color .3s,box-shadow .35s var(--ease)}
.card:hover{border-left-color:var(--leaf)}

.stat{border-top:3px solid var(--leaf)}
.stat:nth-child(2){border-top-color:var(--bleu)}
.stat:nth-child(3){border-top-color:var(--ambre)}
.stat:nth-child(4){border-top-color:#C97BB0}

.page-h h1{
  display:inline-flex;align-items:center;gap:.6rem;
}
.page-h h1::before{
  content:"";width:5px;height:1.5rem;border-radius:99px;
  background:linear-gradient(var(--leaf),var(--leaf-dp));
}

/* ═══════════ fiche client créée par l'admin ═══════════ */
.sans-compte{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;
  background:#FDF0D5;color:#7A5410;border:1px solid #E8B23D;
  padding:.16rem .55rem;border-radius:99px;
}
html[data-theme="sombre"] .sans-compte{background:#3A2D14;color:#E8C07A;border-color:#6B5324}

.ajout-client{
  border:1.5px dashed var(--line);border-radius:var(--r);padding:1.1rem;
  background:var(--card);margin-bottom:1rem;
}
.ajout-client summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  font-weight:700;font-size:.96rem;
}
.ajout-client summary::-webkit-details-marker{display:none}
.ajout-client summary .plus{
  width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:50%;
  background:var(--leaf);color:var(--sur-sombre);font-weight:700;transition:transform .3s var(--ease);
}
.ajout-client[open] summary .plus{transform:rotate(45deg)}
.ajout-client[open]{border-style:solid;border-color:var(--leaf)}
.ajout-client .corps{margin-top:1rem;animation:up .35s var(--ease) both}

/* compression en cours */
.compression{font-size:.78rem;color:var(--leaf-dp);font-weight:600;margin:.3rem 0 0}

/* ════════════════════════════════════════════════════════════
   v6 — PALETTE GRISE, CONTRASTE RENFORCÉ, THÈME SOMBRE CORRIGÉ
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#16191D;
  --ink-2:#2F353B;
  --ink-3:#474E56;
  --leaf:#6FBF4A;
  --leaf-dp:#3E7F27;
  --sap:#D5EEC2;
  --bg:#E6E9EC;
  --card:#FFFFFF;
  --line:#C9CFD5;
  --line-2:#DDE1E5;
  --muted:#58606A;
  --bleu:#2E6E99;
  --rouge:#B63C3C;
  --ambre:#B87812;

  --panneau:#23282E;
  --panneau-2:#343B43;
  --verre:rgba(230,233,236,.9);
  --surface-2:#F3F5F7;

  --btn-bg:#23282E;
  --btn-txt:#FFFFFF;
  --sur-sombre:#FFFFFF;

  --ok-fond:#DDF1D0;  --ok-txt:#2B5E1A;  --ok-bord:#8CC56F;
  --info-fond:#DCEAF4;--info-txt:#1F5A80;--info-bord:#86B4D3;
  --att-fond:#FBEBC8; --att-txt:#6E4B0A; --att-bord:#DCA93F;
  --err-fond:#F6DADA; --err-txt:#8E2828; --err-bord:#D98888;
  --off-fond:#E3E6E9; --off-txt:#4D545C; --off-bord:#BCC3CA;

  --sh:0 1px 2px rgba(22,25,29,.07),0 10px 26px -18px rgba(22,25,29,.4);
}

html[data-theme="sombre"]{
  --ink:#ECEEF1;
  --ink-2:#CDD1D6;
  --ink-3:#AEB4BB;
  --leaf:#86CF63;
  --leaf-dp:#A3DD85;
  --sap:#2E4A22;
  --bg:#1A1C20;
  --card:#25282D;
  --line:#3B3F46;
  --line-2:#2F3238;
  --muted:#A1A7AF;
  --bleu:#7DB7DE;
  --rouge:#EE8A8A;
  --ambre:#E3B15C;

  --panneau:#101113;
  --panneau-2:#2A2E34;
  --verre:rgba(26,28,32,.9);
  --surface-2:#2C3036;

  --btn-bg:#86CF63;
  --btn-txt:#14161A;
  --sur-sombre:#14161A;

  --ok-fond:#243B1C;  --ok-txt:#A8E08A;  --ok-bord:#3F6B2E;
  --info-fond:#1D3140;--info-txt:#9CCBEA;--info-bord:#335670;
  --att-fond:#3A2F16; --att-txt:#EDC77E; --att-bord:#6E5626;
  --err-fond:#3D2020; --err-txt:#F2A3A3; --err-bord:#6E3333;
  --off-fond:#2E3136; --off-txt:#B3B9C0; --off-bord:#474C54;

  --sh:0 1px 2px rgba(0,0,0,.35),0 12px 28px -18px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ── statuts pilotés par les tokens ── */
.b-ok  {background:var(--ok-fond);  color:var(--ok-txt);  border:1px solid var(--ok-bord)}
.b-info{background:var(--info-fond);color:var(--info-txt);border:1px solid var(--info-bord)}
.b-off {background:var(--off-fond); color:var(--off-txt); border:1px solid var(--off-bord)}
.b-alert{background:var(--err-fond);color:var(--err-txt); border:1px solid var(--err-bord)}
.al-err {background:var(--err-fond); color:var(--err-txt); border-color:var(--err-bord)}
.al-ok  {background:var(--ok-fond);  color:var(--ok-txt);  border-color:var(--ok-bord)}
.al-info{background:var(--info-fond);color:var(--info-txt);border-color:var(--info-bord)}
.avert{background:var(--att-fond);color:var(--att-txt);border-color:var(--att-bord)}
.stat-alerte{background:var(--att-fond);border-color:var(--att-bord)}
.stat-alerte b{color:var(--att-txt)}
.doc-ico.ok {background:var(--ok-fond);color:var(--ok-txt)}
.doc-ico.att{background:var(--att-fond);color:var(--att-txt)}
.doc-ico.off{background:var(--off-fond);color:var(--off-txt)}
.sans-compte{background:var(--att-fond);color:var(--att-txt);border-color:var(--att-bord)}
.encaisse,.accord,.edit-box,.saisie{background:var(--surface-2)}
.signe-bloc{background:var(--ok-fond);border-color:var(--ok-bord)}
.signe-bloc b{color:var(--ok-txt)}
.jour{background:var(--ok-fond);color:var(--ok-txt);border-color:var(--ok-bord)}
.fil-vide{background:var(--card)}
.fv-ico,.notif-ico,.card-ico{background:var(--ok-fond);color:var(--ok-txt)}
.notif.neuf{background:var(--card);border-color:var(--leaf);box-shadow:inset 3px 0 0 var(--leaf)}
.notif.alerte .notif-ico{background:var(--err-fond);color:var(--err-txt)}

/* calendrier */
.cal .d{background:var(--surface-2);border-color:var(--line-2)}
.cal .d.st-prevu {background:var(--att-fond);border-color:var(--att-bord);color:var(--att-txt)}
.cal .d.st-fait  {background:var(--ok-fond); border-color:var(--ok-bord); color:var(--ok-txt)}
.cal .d.st-annule{background:var(--err-fond);border-color:var(--err-bord);color:var(--err-txt)}
.cal .d.today{border-color:var(--ink)}
.lg-prevu {background:var(--att-fond);border-color:var(--att-bord)}
.lg-fait  {background:var(--ok-fond); border-color:var(--ok-bord)}
.lg-annule{background:var(--err-fond);border-color:var(--err-bord)}
.passage.st-prevu  .pass-h{background:var(--att-fond);border-color:var(--att-bord);color:var(--att-txt)}
.passage.st-fait   .pass-h{background:var(--ok-fond); border-color:var(--ok-bord); color:var(--ok-txt)}
.passage.st-annule .pass-h{background:var(--err-fond);border-color:var(--err-bord);color:var(--err-txt)}

/* bulles */
.b-moi{background:linear-gradient(140deg,#3A4450 0%,#23282E 100%);color:#F1F3F5}
html[data-theme="sombre"] .b-moi{background:linear-gradient(140deg,#3E6B2B 0%,#2C4E1F 100%);color:#F1F7ED}
.b-lui{background:var(--card);border-color:var(--line)}
.sp-client .b-lui{border-left-color:var(--leaf)}

/* surfaces : plus de relief */
.card,.item,.stat,.liste .item,.jour-bloc{border-color:var(--line)}
.card,.jour-bloc,.stat{box-shadow:var(--sh)}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],input[type=number],select,textarea{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
input:focus,select:focus,textarea:focus{background:var(--card)}
.devis-tab td{border-bottom-color:var(--line-2)}
.devis-tab tr:nth-child(even) td{background:var(--surface-2)}
.tab-mois th,.lignes th{color:var(--muted)}
.auth{background:var(--card);border-color:var(--line)}
.auth-shell{background:radial-gradient(60vw 60vw at 85% -10%,rgba(111,191,74,.16),transparent 60%),var(--bg)}

/* ═══════════ bandeau « espace client » ═══════════ */
.bandeau-espace{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(90deg,var(--panneau),var(--panneau-2));
  color:#E9ECEF;font-size:.8rem;font-weight:600;letter-spacing:.02em;
  padding:.45rem clamp(.9rem,3vw,1.8rem);
}
.bandeau-espace b{color:var(--leaf);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.bandeau-espace .ptv{width:7px;height:7px;border-radius:50%;background:var(--leaf);animation:lueur 2.4s ease-out infinite}
.bandeau-espace span:last-child{margin-left:auto;opacity:.7;font-weight:500}
@media (max-width:520px){.bandeau-espace span:last-child{display:none}}

/* ═══════════ pastilles rouges des onglets ═══════════ */
.pastille-r{
  display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .3rem;
  border-radius:99px;background:var(--rouge);color:#fff;font-size:.68rem;font-weight:800;
  margin-left:.4rem;line-height:1;box-shadow:0 0 0 2px var(--card);
  animation:pop .35s var(--ease) both;
}
.tabs a.act .pastille-r{box-shadow:0 0 0 2px var(--btn-bg)}

/* ═══════════ sélecteurs à segments ═══════════ */
.seg{
  display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:99px;
}
.seg button{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:inherit;font-size:.76rem;font-weight:700;padding:.34rem .72rem;border-radius:99px;
  transition:background .2s,color .2s,transform .15s var(--ease);
}
.seg button:not(.on):hover{background:var(--card);color:var(--ink)}
.seg button:not(.on):active{transform:scale(.95)}
.seg button.on{cursor:default}
.seg .v-prevu.on,.seg .v-envoye.on,.seg .v-envoyee.on{background:var(--att-fond);color:var(--att-txt)}
.seg .v-fait.on,.seg .v-accepte.on,.seg .v-signe.on,.seg .v-payee.on{background:var(--ok-fond);color:var(--ok-txt)}
.seg .v-annule.on,.seg .v-refuse.on,.seg .v-annulee.on{background:var(--err-fond);color:var(--err-txt)}

/* ═══════════ champs date ═══════════ */
input[type=date]{
  position:relative;min-height:2.9rem;padding-right:2.8rem;cursor:pointer;
  background-repeat:no-repeat;background-position:right .85rem center;background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E7F27' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  font-weight:600;font-variant-numeric:tabular-nums;
}
html[data-theme="sombre"] input[type=date]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3DD85' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:auto;height:auto;opacity:0;cursor:pointer;
}
input[type=date]::-webkit-datetime-edit{padding:0}
input[type=date]:hover{border-color:var(--leaf)}

.raccourcis{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.raccourcis button{
  border:1.5px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:700;padding:.25rem .6rem;border-radius:99px;
  transition:all .2s;
}
.raccourcis button:hover{border-color:var(--leaf);color:var(--leaf-dp)}

/* ═══════════ sablier ═══════════ */
.sablier{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:700;
  padding:.22rem .65rem;border-radius:99px;border:1px solid;white-space:nowrap;
}
.sablier svg{animation:sablier 3.2s var(--ease) infinite}
@keyframes sablier{0%,70%{transform:rotate(0)}85%,100%{transform:rotate(180deg)}}
.sab-vert {background:var(--ok-fond); color:var(--ok-txt); border-color:var(--ok-bord)}
.sab-ambre{background:var(--att-fond);color:var(--att-txt);border-color:var(--att-bord)}
.sab-rouge{background:var(--err-fond);color:var(--err-txt);border-color:var(--err-bord)}
.sab-exp  {background:var(--off-fond);color:var(--off-txt);border-color:var(--off-bord)}
.sab-exp svg{animation:none}

.expire-bloc{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--off-fond);border:1.5px solid var(--off-bord);color:var(--off-txt);
  border-radius:var(--r);padding:1.1rem 1.2rem;margin-top:1rem;
}

/* ═══════════ présence ═══════════ */
.presence{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--muted)}
.presence i{width:8px;height:8px;border-radius:50%;background:var(--off-bord)}
.presence.on{color:var(--ok-txt)}
.presence.on i{background:var(--leaf);animation:lueur 2s ease-out infinite}
.av-wrap{position:relative;display:inline-flex}
.av-wrap .point{
  position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;
  background:var(--leaf);border:2px solid var(--card);animation:lueur 2s ease-out infinite;
}

/* ═══════════ fiche client admin : en-tête collant ═══════════ */
.dossier-tete{
  position:sticky;top:calc(3.6rem + env(safe-area-inset-top,0px));z-index:30;
  background:var(--verre);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  margin:0 calc(clamp(.9rem,3vw,1.8rem)*-1) 1rem;
  padding:.7rem clamp(.9rem,3vw,1.8rem) 0;
  border-bottom:1px solid var(--line);
}
.dossier-id{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.dossier-id .nom{font-family:var(--f-disp);font-weight:800;font-size:1.12rem;line-height:1.15}
.dossier-id .contact{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.82rem;margin-top:.15rem}
.dossier-id .contact a{color:var(--bleu);text-decoration:none;font-weight:600}
.dossier-id .dessous{flex:1;min-width:10rem}
.dossier-tete .tabs{padding:.7rem 0 .7rem;margin:0}

/* discussion admin : défile dans sa propre zone */
.chat-cadre .fil{
  max-height:calc(100dvh - 21rem);min-height:16rem;overflow-y:auto;
  padding:.8rem .6rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);scroll-behavior:smooth;
}
.chat-cadre .compose{position:static;padding-top:.7rem}
@media (max-width:859px){.chat-cadre .fil{max-height:calc(100dvh - 24rem)}}

/* ═══════════ animation de réussite ═══════════ */
.reussite{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(16,17,19,.55);backdrop-filter:blur(4px);
  animation:fondu-out .4s ease 2.2s forwards;pointer-events:none;
}
.reussite-carte{
  background:var(--card);color:var(--ink);border-radius:22px;padding:2rem 2.4rem;
  text-align:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  animation:rebond .55s cubic-bezier(.2,1.4,.4,1) both;min-width:16rem;
}
.reussite-rond{
  width:4.6rem;height:4.6rem;margin:0 auto .9rem;border-radius:50%;
  display:grid;place-items:center;background:var(--leaf);position:relative;
}
.reussite-rond::before,.reussite-rond::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--leaf);
  animation:onde 1.2s ease-out .2s both;
}
.reussite-rond::after{animation-delay:.45s}
.reussite-rond svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:trace .45s ease .35s forwards}
.reussite-carte b{display:block;font-family:var(--f-disp);font-size:1.25rem;font-weight:800}
.reussite-carte span{display:block;color:var(--muted);font-size:.9rem;margin-top:.3rem}
.reussite i{position:absolute;width:8px;height:12px;border-radius:2px;top:50%;left:50%;opacity:0;animation:confetti 1.1s ease-out .3s forwards}
@keyframes rebond{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes onde{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes fondu-out{to{opacity:0;visibility:hidden}}
@keyframes confetti{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}
}

/* bouton facture indisponible */
.btn[disabled],.btn.indispo{opacity:.45;cursor:not-allowed;pointer-events:none}
.aide-indispo{font-size:.76rem;color:var(--muted);font-style:italic}

/* invitation */
.invit{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  background:var(--surface-2);border:1.5px dashed var(--leaf);border-radius:12px;padding:.7rem .8rem;margin-top:.8rem;
}
.invit input{flex:1;min-width:12rem;font-size:.82rem;font-family:ui-monospace,monospace;padding:.5rem .65rem}

/* ═══════════ preuve ═══════════ */
.empreinte{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;
  word-break:break-all;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:.45rem .6rem;margin-top:.25rem;color:var(--ink);
}
.preuve{width:100%;border-top:1px dashed var(--line);padding-top:.6rem}
.preuve summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);list-style:none}
.preuve summary::-webkit-details-marker{display:none}
.preuve summary::before{content:"▸ ";display:inline-block;transition:transform .2s}
.preuve[open] summary::before{transform:rotate(90deg)}
.preuve-l{font-size:.72rem;color:var(--muted);margin:.7rem 0 0;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.chrono{list-style:none;margin:.8rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--leaf)}
.chrono li{position:relative;padding:0 0 .8rem .3rem;font-size:.82rem}
.chrono li::before{content:"";position:absolute;left:-1.42rem;top:.3rem;width:9px;height:9px;border-radius:50%;background:var(--leaf);border:2px solid var(--card)}
.chrono b{display:block}
.chrono span{display:block;color:var(--muted);font-size:.78rem}
.chrono .ua{font-size:.7rem;opacity:.75}

/* ═══════════════════════════ v8 ═══════════════════════════ */

.btn-danger{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn-danger:hover{background:#8E2F2F;border-color:#8E2F2F;color:#fff}
.b-retard{background:var(--rouge);color:#fff}
.ff-titre{font-size:.8rem;font-weight:700;color:var(--muted);margin:.2rem 0 .45rem}
.aide-texte{font-size:.88rem;color:var(--muted);margin:0 0 .9rem;line-height:1.55}

/* formulaire de facture */
details.facturer{display:inline-block;max-width:100%}
details.facturer > summary{list-style:none;cursor:pointer}
details.facturer > summary::-webkit-details-marker{display:none}
details.facturer[open]{display:block;width:100%}
details.facturer[open] > summary{background:transparent;color:var(--muted);border-color:var(--line)}
.facturer-form{
  margin-top:.7rem;padding:1rem;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);
  animation:pop .25s var(--ease) both;
}
.etat-choix{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.etat-choix label{position:relative;cursor:pointer}
.etat-choix input{position:absolute;opacity:0;pointer-events:none}
.etat-choix span{display:block;height:100%;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:12px;background:var(--card);transition:border-color .2s,background .2s}
.etat-choix b{display:block;font-size:.92rem}
.etat-choix i{display:block;font-style:normal;font-size:.76rem;color:var(--muted);margin-top:.15rem}
.etat-choix input:checked + span{border-color:var(--leaf-dp);background:rgba(143,209,106,.12);box-shadow:inset 0 0 0 1px var(--leaf-dp)}
.etat-choix input:focus-visible + span,.delais input:focus-visible + span,.motifs input:focus-visible + span{outline:2.5px solid var(--bleu);outline-offset:2px}
.delais,.motifs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.delais label,.motifs label{cursor:pointer;position:relative}
.delais input,.motifs input{position:absolute;opacity:0;pointer-events:none}
.delais span,.motifs span{display:inline-block;padding:.42rem .8rem;border:1.5px solid var(--line);border-radius:99px;font-size:.84rem;font-weight:600;background:var(--card);transition:all .15s}
.delais input:checked + span,.motifs input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.si-payee{display:none}
.facturer-form.est-payee .si-payee{display:grid}
.facturer-form.est-payee .si-a-regler{display:none}
.facturer-form .f select,.facturer-form .f input{padding:.55rem .65rem;font-size:15px}
@media (min-width:560px){.si-payee.two{grid-template-columns:1fr 1fr}}

/* choix de l'adresse d'envoi */
.envoi-mail{border:1.5px dashed var(--line);border-radius:12px;padding:.8rem .9rem;margin:0 0 1rem;min-width:0}
.envoi-mail legend{font-size:.8rem;font-weight:700;color:var(--muted);padding:0 .3rem}
.envoi-mail .choix{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.3rem 0;cursor:pointer}
.envoi-mail .choix input{accent-color:var(--leaf-dp);width:1.05rem;height:1.05rem}
.envoi-autre{display:none;margin:.3rem 0 .5rem 1.6rem}
.envoi-mail.montre-autre .envoi-autre{display:block}
.envoi-autre input[type=email]{width:100%;max-width:22rem;padding:.55rem .65rem;font-size:15px}
.envoi-autre .petit{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin-top:.35rem}
.envoi-auto{border-style:solid;background:rgba(143,209,106,.07)}
.envoi-auto p{margin:0;font-size:.86rem}

/* facture dans le planning */
.pass-facture{width:100%;margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line)}
.pass-detail .pass-facture{margin-top:.9rem}
.pass-facture-t{font-size:.86rem;font-weight:700;color:var(--leaf-dp);margin:0 0 .5rem}
.ligne .pass-facture{flex-basis:100%}
.encaisse-aide{flex-basis:100%;margin:0;font-size:.76rem;color:var(--muted)}

/* annulation d'un devis */
details.annuler-devis{width:100%}
details.annuler-devis > summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);list-style:none;display:inline-block}
details.annuler-devis > summary::-webkit-details-marker{display:none}
details.annuler-devis > summary:hover{color:var(--rouge)}
details.annuler-devis form{margin-top:.6rem;padding:.9rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg)}
details.annuler-devis textarea{min-height:0}
.motif-annul{margin:0;font-size:.84rem;color:var(--rouge)}
.annule-bloc{border:1.5px solid var(--line);border-left:4px solid var(--rouge);border-radius:var(--r);padding:1rem 1.2rem;margin:1rem 0;background:var(--card)}
.annule-bloc b{display:block;color:var(--rouge)}
.annule-bloc p{margin:.4rem 0 0;font-size:.93rem}
.annule-bloc p span{color:var(--muted)}
.annule-bloc .petit{font-size:.82rem;color:var(--muted)}

/* payer par virement (espace client) */
details.virement > summary{list-style:none;cursor:pointer;display:inline-flex;gap:.45rem;align-items:center}
details.virement > summary::-webkit-details-marker{display:none}
details.virement[open] > summary{background:transparent;color:var(--ink);border-color:var(--line)}
.vir-corps{margin-top:.7rem;padding:1rem;border:1.5px solid rgba(143,209,106,.4);border-radius:14px;background:rgba(143,209,106,.07);animation:pop .25s var(--ease) both}
.vir-intro{margin:0 0 .8rem;font-size:.88rem;line-height:1.5}
.vir-infos{margin:0;display:grid;gap:.45rem}
.vir-infos > div{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.6rem;align-items:center;padding:.55rem .7rem;background:var(--card);border:1px solid var(--line);border-radius:10px}
.vir-infos dt{font-size:.76rem;color:var(--muted);font-weight:700}
.vir-infos dd{margin:0;font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.vir-infos .vir-ref{border-color:var(--leaf-dp);box-shadow:inset 0 0 0 1px var(--leaf-dp)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.copier{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:.3rem .7rem;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap}
.copier:hover{border-color:var(--ink)}
.copier.copie{background:var(--leaf-dp);border-color:var(--leaf-dp);color:#fff}
.vir-note{margin:.8rem 0 0;font-size:.78rem;color:var(--muted)}
@media (max-width:480px){
  .vir-infos > div{grid-template-columns:1fr auto}
  .vir-infos dt{grid-column:1 / -1}
  .etat-choix{grid-template-columns:1fr}
}

/* page virements (admin) */
.import-releve{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.import-releve input[type=file]{flex:1 1 14rem;padding:.55rem;font-size:.86rem}
.vir-ligne{flex-direction:column;align-items:stretch;gap:.6rem}
.vir-haut{display:flex;align-items:center;gap:.7rem;width:100%}
.vir-lib{flex:1;min-width:0}
.vir-lib b{display:block;font-size:.93rem;overflow-wrap:anywhere}
.vir-lib b a{color:inherit}
.vir-lib span{display:block;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.vir-mnt{font-family:var(--f-disp);color:var(--leaf-dp);white-space:nowrap;display:flex;gap:.4rem;align-items:center}
.vir-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.vir-attrib{display:flex;gap:.5rem;flex:1 1 20rem;flex-wrap:wrap}
.vir-attrib select{flex:1 1 14rem;min-width:0;padding:.5rem .6rem;font-size:14px}
.vir-ignore{opacity:.6}

/* RGPD */
.pied-legal{text-align:center;font-size:.76rem;color:var(--muted);margin:2rem 0 .5rem}
.pied-legal a{color:inherit}
.legal{max-width:46rem;text-align:left}
.legal h2{font-size:1.1rem;margin:1.8rem 0 .5rem}
.legal ul{padding-left:1.2rem}
.legal li{margin:.35rem 0}
.legal p,.legal li{line-height:1.6;font-size:.94rem}
.legal-maj{font-size:.82rem;color:var(--muted);margin-top:1.5rem}
details.zone-danger > summary{cursor:pointer;font-weight:700;color:var(--rouge);font-size:.9rem}
details.zone-danger p{font-size:.86rem;color:var(--muted);margin:.7rem 0}
details.suppr-compte > summary{list-style:none;cursor:pointer}
details.suppr-compte > summary::-webkit-details-marker{display:none}
details.suppr-compte form{margin-top:.6rem;padding:.9rem;border:1.5px solid var(--line);border-radius:12px}
details.suppr-compte p{font-size:.84rem;color:var(--muted);margin:0 0 .6rem}

@media (prefers-reduced-motion:reduce){
  .facturer-form,.vir-corps{animation:none}
}

/* ═══════════════════════════ v9 ═══════════════════════════ */

/* Un seul œil : on masque celui qu'ajoutent Edge et certains navigateurs */
input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}
input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0}
input::-webkit-contacts-auto-fill-button{visibility:hidden}

/* bouton d'inscription tant que le formulaire est incomplet */
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.form-manque{font-size:.8rem;color:var(--muted);text-align:center;margin:.55rem 0 0;min-height:1.2em}

/* nouveautés en direct (espace client) */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.2rem + env(safe-area-inset-bottom,0px));
  z-index:90;display:flex;flex-direction:column;gap:.5rem;width:min(26rem,calc(100% - 1.6rem));pointer-events:none}
@media (min-width:900px){.toasts{bottom:1.4rem;left:auto;right:1.4rem;transform:none}}
.toast{pointer-events:auto;display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem;border-radius:14px;
  background:var(--ink);color:var(--bg);box-shadow:0 18px 40px -18px rgba(0,0,0,.55);animation:toast-in .35s var(--ease) both}
.toast.sort{animation:toast-out .3s ease forwards}
.toast-ico{flex:none;width:2.1rem;height:2.1rem;border-radius:99px;display:grid;place-items:center;background:var(--leaf);color:#0C1611}
.toast-c{flex:1;min-width:0}
.toast-c b{display:block;font-size:.9rem}
.toast-c span{display:block;font-size:.78rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast a{flex:none;color:var(--leaf);font-weight:700;font-size:.84rem;text-decoration:none}
.toast button{flex:none;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:1.1rem;padding:.2rem}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px)}}
.pastille-r.nouveau,.pt-abs.nouveau,.pt-cloche.nouveau{animation:pop .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){.toast,.toast.sort{animation:none}}

/* planning : envoi manuel de la facture */
.pass-facture .a-facturer{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pass-facture .a-facturer span{font-size:.84rem;color:var(--muted)}
.plafond-note{margin:.8rem 0 0;font-size:.84rem;background:rgba(0,0,0,.18);border-radius:10px;padding:.55rem .75rem}
.dl-bloque{margin:1rem 0 0;font-size:.86rem;color:var(--muted);font-style:italic}
details.depot-signe{width:100%}
details.depot-signe > summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--leaf-dp);list-style:none;display:inline-block}
details.depot-signe > summary::-webkit-details-marker{display:none}
details.depot-signe form{margin-top:.6rem;padding:.9rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg)}
details.depot-signe input[type=file]{width:100%;padding:.5rem;font-size:.86rem}