/* Espace clients DataPet — portal, login and password pages. Tokens shared with datapet.fr. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/outfit-variable-3BR0lLl.woff2") format("woff2")}
@font-face{font-family:"Saira Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/saira-semi-condensed-400-P6SuKYG.woff2") format("woff2")}
@font-face{font-family:"Saira Semi Condensed";font-style:normal;font-weight:500 600;font-display:swap;src:url("../fonts/saira-semi-condensed-600-bHV2382.woff2") format("woff2")}
@font-face{font-family:"Saira Semi Condensed";font-style:normal;font-weight:700 800;font-display:swap;src:url("../fonts/saira-semi-condensed-700-o8lLyBz.woff2") format("woff2")}

:root{
  --ink:#351B5D;
  --ink-2:#625A73;
  --bg:#FFFFFF;
  --bg-2:#F5F3F8;
  --coral:#FF8A73;
  --coral-ink:#B8432E;
  --mint:#7B4FC9;
  --mint-pale:#EEE8F7;
  --line:#DDE1EA;
  --ok:#1E6B45;
  --ok-bg:#E5F4EC;
  --warn:#7A4B00;
  --warn-bg:#FFF2D6;
  --danger:#A3321F;
  --danger-bg:#FCE9E5;
  --r-lg:20px;
  --r-md:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-2);color:var(--ink);font:400 1.0625rem/1.55 "Saira Semi Condensed",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:"Outfit",system-ui,sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(1.7rem,3.5vw,2.3rem)}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
a{color:var(--mint)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;box-shadow:0 0 0 3px var(--ink);border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:"Outfit",sans-serif;font-weight:800;font-size:1.15rem}
.brand img{width:128px;height:24px}
.brand small{font-weight:500;color:var(--ink-2);font-size:.9rem}
.nav{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
.nav a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:600}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--mint-pale);color:var(--ink)}
.who{font-size:.95rem;color:var(--ink-2)}

.wrap{max-width:1080px;margin:0 auto;padding:0 16px;width:100%}
main{flex:1;padding:32px 0 56px}
main > .wrap > * + *{margin-top:24px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lead{color:var(--ink-2);margin-top:6px}
footer{padding:24px 0;color:var(--ink-2);font-size:.9rem;text-align:center}

/* Cards and grids */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.card > * + *{margin-top:12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stat{font-family:"Outfit",sans-serif;font-size:2rem;font-weight:800;line-height:1}
.muted{color:var(--ink-2)}
.small{font-size:.92rem}
.meter{height:10px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--mint);border-radius:999px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1.3em;border-radius:999px;font:600 1rem/1.2 inherit;font-family:inherit;text-decoration:none;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{background:var(--bg-2);color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn-link{border:0;background:none;padding:0;color:var(--mint);text-decoration:underline;font:inherit;cursor:pointer}

/* Tables */
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:.98rem}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--ink-2);font-size:.9rem;background:#FBFAFD}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}

/* Badges */
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:600;white-space:nowrap;background:var(--bg-2);color:var(--ink)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-primary{background:var(--mint-pale);color:#4A2C86}
.badge-warning{background:var(--warn-bg);color:var(--warn)}
.badge-success{background:var(--ok-bg);color:var(--ok)}
.badge-secondary{background:var(--bg-2);color:var(--ink-2)}

/* Flash messages */
.flash{padding:12px 16px;border-radius:var(--r-md);border:1px solid transparent}
.flash-success{background:var(--ok-bg);color:var(--ok);border-color:#BFE3CF}
.flash-danger{background:var(--danger-bg);color:var(--danger);border-color:#F3C4BA}
.flash-warning,.flash-info{background:var(--warn-bg);color:var(--warn);border-color:#F1DDA8}

/* Forms */
form > div + div,.field + .field{margin-top:16px}
label,legend{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{width:100%;padding:.65em .8em;border:1.5px solid #B9B3C6;border-radius:var(--r-md);font:inherit;color:var(--ink);background:#fff}
textarea{resize:vertical;min-height:7em}
input:focus,select:focus,textarea:focus{border-color:var(--mint);outline:3px solid var(--mint-pale);outline-offset:0}
fieldset{border:0}
fieldset input[type=radio]{margin-right:8px;accent-color:var(--mint)}
fieldset label{display:inline;font-weight:400}
fieldset > div > div{margin:6px 0}
.help-text,form small{display:block;color:var(--ink-2);font-size:.9rem;margin-top:4px}
.form-error,form ul li{color:var(--danger);font-size:.95rem;list-style:none;margin-top:4px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}

/* Ticket thread */
.thread{list-style:none}
.thread > li + li{margin-top:16px}
.msg{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.msg.from-us{border-left:4px solid var(--mint)}
.msg header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem;color:var(--ink-2);margin-bottom:8px}
.msg header strong{color:var(--ink)}
.prose > * + *{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.4em}
.prose code{background:var(--bg-2);padding:.1em .35em;border-radius:6px;font-size:.92em}
.prose pre{background:var(--bg-2);padding:12px;border-radius:var(--r-md);overflow-x:auto}
.files{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.files a{display:inline-flex;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.92rem}
.meta{display:flex;gap:10px 20px;flex-wrap:wrap;color:var(--ink-2);font-size:.95rem}

/* Login */
.auth{max-width:440px;margin:6vh auto 0}
.auth .brand{justify-content:center;margin-bottom:20px}
.auth h1{font-size:1.6rem;text-align:center;margin-bottom:8px}
.auth .lead{text-align:center;margin-bottom:20px}
.qr{display:block;margin:12px auto;width:220px;height:220px}
.secret{font-family:ui-monospace,monospace;letter-spacing:.08em;word-break:break-all;background:var(--bg-2);padding:8px 12px;border-radius:8px}

@media (max-width:640px){
  main{padding-top:20px}
  .card{padding:18px}
  th,td{padding:10px 12px}
  .hide-sm{display:none}
}