@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --ink:#15233c;
  --ink-soft:#5a6478;
  --paper:#f4f4f6;
  --card:#ffffff;
  --rule:#d5d8e0;
  --brand:#f190bc;
  --brand-soft:#fbe3ee;
  --zone:#2f6f9f;
  --alert:#b3261e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  background:#0f1828;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
}
.page{width:100%;max-width:440px;background:var(--paper);min-height:100vh;position:relative}
.large{max-width:900px}

/* ---- bandeau ---- */
.brandbar{
  background:var(--ink);color:#fff;padding:14px 20px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:4px solid var(--brand);
}
.brandbar .mark{display:flex;align-items:center;gap:10px}
.brandbar img{height:30px;width:auto;display:block}
.brandbar .mark b{font-family:'Barlow Condensed';font-weight:600;font-size:17px;letter-spacing:.08em}
.brandbar span.r{font-size:12px;color:#8f9bb3}
.brandbar a{color:#8f9bb3;font-size:12.5px;text-decoration:none;border-bottom:1px solid #3c4a63}

/* ---- connexion agent ---- */
.auth{padding:26px 22px 34px}
.cobrand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cobrand .sep{width:1px;height:38px;background:var(--rule)}
.cobrand .es{width:112px;height:auto;display:block}
.cobrand .cl{height:46px;width:auto;display:block}
.where{font-family:'Barlow Condensed';font-weight:700;font-size:26px;line-height:1.1}
.where small{display:block;font-family:'Barlow';font-weight:500;font-size:14px;color:var(--ink-soft);margin-top:3px}
p.why{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-top:14px}
.field{margin-top:20px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:17px;padding:12px 14px;background:var(--card);
  border:1px solid #b9bfcc;border-radius:2px;color:var(--ink);
}
.field input[inputmode="numeric"]{font-size:19px;letter-spacing:.06em}
.field textarea{font-size:15.5px;line-height:1.5;min-height:230px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2.5px solid var(--brand);outline-offset:-1px;border-color:transparent}
.field .hint{font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.err{background:#fdecea;border-left:4px solid var(--alert);color:#7d1a15;padding:10px 12px;font-size:14px;margin-top:16px}
.ok{background:#e8f5ec;border-left:4px solid #1d6f42;color:#14532d;padding:10px 12px;font-size:14px;margin-top:16px}
.cta{
  margin-top:24px;width:100%;font:inherit;font-weight:600;font-size:17px;
  background:var(--brand);color:var(--ink);border:0;padding:15px;border-radius:2px;cursor:pointer;
}
.cta:hover{background:#e57bae}
.cta.sombre{background:var(--ink);color:#fff}
.cta.sombre:hover{background:#24365a}

/* ---- fiche ---- */
.fhead{background:var(--ink);color:#fff;padding:18px 20px 20px;position:relative}
.clientlogo{position:absolute;top:16px;right:18px;height:52px;width:auto}
.fhead .meta{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#a8b0c2;margin-bottom:7px;flex-wrap:wrap;padding-right:64px}
.fhead .meta .dot{width:4px;height:4px;border-radius:50%;background:#5a6785}
.fhead h2{font-family:'Barlow Condensed';font-weight:700;font-size:31px;line-height:1.02;padding-right:64px}
.fhead .sub{font-size:14.5px;color:#c6cddd;margin-top:5px;padding-right:64px}
.zoneline{display:flex;align-items:center;gap:9px;margin-top:14px;background:rgba(255,255,255,.07);padding:9px 12px;border-left:3px solid var(--brand)}
.zoneline b{font-family:'Barlow Condensed';font-size:17px;font-weight:600}
.zoneline span{font-size:13px;color:#b4bccd}

.fbody{padding:22px 20px 30px;display:flex;flex-direction:column;gap:24px}
.block h3{
  font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.09em;color:var(--ink);
  padding-bottom:6px;border-bottom:2px solid var(--brand);margin-bottom:12px;
}
ul.mission{list-style:none;display:flex;flex-direction:column;gap:13px}
ul.mission>li{font-size:16px;line-height:1.5;padding-left:17px;position:relative}
ul.mission>li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--brand)}
ul.mission ul{list-style:none;margin-top:7px;display:flex;flex-direction:column;gap:5px}
ul.mission ul li{font-size:14.5px;color:var(--ink-soft);line-height:1.45;padding-left:15px;position:relative}
ul.mission ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:1.5px;background:#a7adbb}
p.texte{font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
p.phase{
  font-family:'Barlow Condensed';font-weight:600;font-size:14px;letter-spacing:.05em;
  color:var(--ink);background:var(--brand-soft);display:inline-block;padding:3px 9px;margin:4px 0 2px;
}
.callout{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--zone);padding:14px 15px}
.callout.vigi{border-top-color:var(--alert)}
.callout p,.callout li{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.callout ul.mission>li::before{background:var(--zone)}
.times{display:flex;flex-direction:column;border:1px solid var(--rule);background:#fff}
.times div{display:flex;gap:14px;padding:10px 14px;font-size:15px;border-bottom:1px solid #eceef2}
.times div:last-child{border-bottom:0}
.times b{font-family:'Barlow Condensed';font-weight:600;font-size:17px;min-width:56px}
.pc{display:block;text-align:center;background:var(--ink);color:#fff;text-decoration:none;padding:15px;font-weight:600;font-size:16.5px;border-radius:2px}
.ffoot{padding:16px 20px 34px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-soft);line-height:1.5;display:flex;justify-content:space-between;gap:14px;align-items:flex-end}
.ffoot a{color:var(--ink)}

/* ---- back-office ---- */
.admin{padding:24px 22px 40px}
.admin h1{font-family:'Barlow Condensed';font-weight:700;font-size:28px;margin-bottom:4px}
.admin .lede{color:var(--ink-soft);font-size:15px;line-height:1.5;margin-bottom:22px}
.admin h2{font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.07em;
  padding-bottom:6px;border-bottom:2px solid var(--brand);margin:30px 0 14px}
.liste{display:flex;flex-direction:column;gap:9px}
.liste a.item{
  display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--rule);
  border-left:5px solid var(--brand);padding:13px 15px;text-decoration:none;color:var(--ink);
}
.liste a.item:hover{background:#fff8fb}
.liste .num{width:36px;height:36px;border-radius:50%;flex:0 0 36px;background:var(--brand-soft);
  display:grid;place-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:14px}
.liste .lbl strong{display:block;font-family:'Barlow Condensed';font-weight:600;font-size:18px}
.liste .lbl em{font-style:normal;font-size:13px;color:var(--ink-soft)}
table.j{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px}
table.j th,table.j td{text-align:left;padding:8px 10px;border-bottom:1px solid #eceef2}
table.j th{font-family:'Barlow Condensed';font-size:13px;letter-spacing:.05em;background:#fafbfc}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.bar a,.bar button{font:inherit;font-size:14.5px;padding:10px 16px;border:1px solid var(--rule);
  background:#fff;color:var(--ink);text-decoration:none;border-radius:2px;cursor:pointer}
.aide{background:#fff;border:1px solid var(--rule);padding:14px 16px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.aide code{background:var(--brand-soft);color:var(--ink);padding:1px 5px;font-size:13.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- ajouts version 2 ---- */
.liste .vignette{width:44px;height:44px;flex:0 0 44px;object-fit:contain;background:#fff;border:1px solid var(--rule);padding:3px}
.apercu{display:flex;align-items:center;gap:12px;margin-bottom:10px;background:#fff;border:1px solid var(--rule);padding:10px 12px}
.apercu img{height:48px;width:auto;display:block}
.apercu span{font-size:13px;color:var(--ink-soft)}
.field input[type=file]{padding:10px;font-size:14px;background:#fff}
code.url{word-break:break-all;background:var(--brand-soft);color:var(--ink);padding:4px 7px;display:inline-block;margin-top:5px;font-size:13.5px}
.admin .lede code{background:var(--brand-soft);padding:1px 6px}