/* Page atteinte en scannant le QR code collé sur la machine : pensée pour le mobile */

/* carte machine */
.mach{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:20px 18px;background:var(--espresso);color:#ECECE8}
.mach .ph{aspect-ratio:1/1;background:var(--white);display:grid;place-items:center}
.mach .ph img{width:100%;height:100%;object-fit:contain;padding:8px}
.mach small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d)}
.mach b{display:block;font-size:24px;font-weight:400;letter-spacing:-.03em;color:var(--white);line-height:1.15;margin:2px 0 4px}
.mach span{font-size:13.5px;color:var(--muted-d)}
.state{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted-d);padding:0 18px 16px;background:var(--espresso)}
.state::before{content:"";width:7px;height:7px;background:#6FBF7F;animation:pulse 1.6s ease-in-out infinite}

/* vues */
.view{padding:22px 18px 32px;animation:entre .45s var(--ease)}
.view[hidden]{display:none}
@keyframes entre{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.view h1{font-size:28px;font-weight:400;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.view h1 em{font-style:normal;color:var(--soft)}
.view .intro{color:var(--muted);font-size:15px;margin-top:8px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.act{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;min-height:136px;padding:16px;background:var(--white);border:1px solid var(--line);transition:transform .2s var(--ease),border-color .2s}
.act:active{transform:scale(.98)}
.act:hover{border-color:var(--ink)}
.act:focus-visible{outline:2px solid var(--ink)}
.act svg{width:28px;height:28px;color:var(--ink)}
.act b{font-size:16px;font-weight:500;color:var(--ink);line-height:1.25;margin-top:auto}
.act span{font-size:13px;color:var(--muted);line-height:1.35}
.act.main{grid-column:1/-1;flex-direction:row;align-items:center;min-height:auto;background:var(--ink);border-color:var(--ink)}
.act.main svg,.act.main b{color:var(--white)}
.act.main span{color:#BDBDB7}
.act.main b{margin:0;display:block}
.act.main span{display:block}
.act.main .arr{margin-left:auto;width:20px;height:20px}
.act.alert{border-color:var(--ink)}
.links{margin-top:22px;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.links a svg{width:16px;height:16px}

/* signalement */
.qs{margin-top:22px}
.qs>p{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:10px 14px;border:1px solid var(--line);background:var(--white);font-size:14px;transition:all .2s}
.chips input:checked+span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.hint{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px 14px;background:var(--white);border:1px dashed var(--line-2);font-size:13.5px;color:var(--muted)}
.hint svg{flex:none;width:20px;height:20px;color:var(--ink)}
.hint button{all:unset;cursor:pointer;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink)}
.field input,.field textarea{padding:12px 14px;border:1px solid var(--line-2);background:var(--white);border-radius:0;font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.photo{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line-2);background:var(--white);cursor:pointer;font-size:14.5px;color:var(--ink);margin-top:14px}
.photo svg{width:22px;height:22px}
.photo input{display:none}
.photo small{margin-left:auto;color:var(--soft);font-size:12.5px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:14px;background:var(--white);border:1px solid var(--line);font-size:14.5px;color:var(--ink);cursor:pointer}
.toggle input{width:44px;height:26px;-webkit-appearance:none;appearance:none;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s;flex:none}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--white);transition:transform .25s var(--ease)}
.toggle input:checked{background:var(--ink)}
.toggle input:checked::after{transform:translateX(18px)}
.send{width:100%;margin-top:20px;min-height:56px;font-size:16px}
.done{text-align:center;padding:40px 8px}
.done .ok{width:64px;height:64px;margin:0 auto 20px;display:grid;place-items:center;background:var(--ink);color:var(--white)}
.done .ok svg{width:30px;height:30px}
.done h2{font-size:26px;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.done p{color:var(--muted);margin-top:8px}
.done .tk{display:inline-block;margin-top:16px;padding:8px 14px;background:var(--white);border:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:14px}

/* dépannage */
.fix{margin-top:18px;border-top:1px solid var(--line)}
.fx{border-bottom:1px solid var(--line)}
.fx button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:40px 1fr 24px;gap:12px;align-items:center;padding:16px 0;font-size:15.5px;font-weight:500;color:var(--ink)}
.fx button:focus-visible{outline:2px solid var(--ink)}
.fx .ic{width:40px;height:40px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line)}
.fx .ic svg{width:20px;height:20px}
.fx .ch{width:16px;height:16px;transition:transform .3s var(--ease)}
.fx.open .ch{transform:rotate(90deg)}
.fx .bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.fx.open .bd{grid-template-rows:1fr}
.fx .bd>div{overflow:hidden}
.fx ol{margin:0 0 16px 52px;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--text)}
.fx ol li::marker{color:var(--brass);font-weight:500}
.fx .note{margin:0 0 16px 52px;font-size:13px;color:var(--muted)}
.safety{display:flex;gap:10px;margin-top:18px;padding:14px;background:var(--white);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.safety svg{flex:none;width:20px;height:20px;color:var(--ink)}
.still{margin-top:22px;padding:18px;background:var(--ink);color:var(--white)}
.still b{display:block;font-weight:500;font-size:16px}
.still p{font-size:14px;color:#BDBDB7;margin:4px 0 14px}
.still .btn{background:var(--white);color:var(--ink);border-color:var(--white);width:100%}

/* cafés */
.cafes{display:grid;gap:10px;margin-top:20px}
.cafe{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:12px;background:var(--white);border:1px solid var(--line);position:relative}
.cafe.ici{border-color:var(--ink)}
.cafe .ph{aspect-ratio:1/1;background:var(--bg)}
.cafe .ph img{width:100%;height:100%;object-fit:cover}
.cafe b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.cafe .pf{font-size:12.5px;color:var(--brass);font-weight:500}
.cafe p{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.cafe .tag{position:absolute;top:-1px;right:-1px;font-size:11px;font-weight:500;padding:4px 8px;background:var(--ink);color:var(--white)}
.labels-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.labels-m span{font-size:12.5px;padding:4px 9px;background:var(--surface)}

/* durabilité */
.dur{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dur div{padding:16px;background:var(--espresso);color:#ECECE8}
.dur b{display:flex;align-items:baseline;font-size:34px;font-weight:300;letter-spacing:-.04em;color:var(--white);line-height:1.1}
.dur b small{font-size:.45em;margin-left:.2em;color:var(--muted-d)}
.dur span{font-size:13px;color:var(--muted-d)}
.marc{margin-top:10px;padding:18px;background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.marc svg{width:36px;height:36px;color:var(--ink)}
.marc b{display:block;color:var(--ink);font-weight:500}
.marc span{font-size:13.5px;color:var(--muted)}

.layout{display:block}
.side{display:none}
.ident select{padding:12px 14px;border:1px solid var(--line-2);background:var(--white);border-radius:0;font:inherit;font-size:16px}
.team{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.team::before{content:"";width:7px;height:7px;background:var(--brass)}

/* ---------- mise en page dans le thème du site ---------- */
.assist{background:var(--bg);padding:20px 0 64px}
.assist .crumbs{margin-bottom:18px}
.layout{display:grid;gap:16px}
.side-col{background:var(--espresso)}
.side{display:none}
.mach{background:transparent}
.state{background:transparent}
.layout>main{background:var(--white);border:1px solid var(--line)}
.view{padding:22px 18px 30px}
@media (min-width:900px){
  .assist{padding:28px 0 96px}
  .layout{grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}
  .side-col{position:sticky;top:96px}
  .mach{grid-template-columns:1fr;padding:24px 24px 12px}
  .state{padding:0 24px 20px}
  .side{display:block;background:var(--white);border:1px solid var(--line);border-top:0}
  .side a,.side button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);transition:background .2s}
  .side a:last-child,.side button:last-child{border-bottom:0}
  .side a:hover,.side button:hover,.side .on{background:var(--bg)}
  .side .on{box-shadow:inset 3px 0 0 var(--ink);font-weight:500}
  .side svg{width:22px;height:22px;flex:none}
  .view{padding:40px 44px 48px}
  .view h1{font-size:40px}
  .acts{grid-template-columns:repeat(3,1fr)}
  .act.main{grid-column:1/-1}
  .cafes{grid-template-columns:repeat(2,1fr)}
  .dur{grid-template-columns:repeat(4,1fr)}
  .ident{max-width:520px}
}
@media (max-width:899px){
  .mach{grid-template-columns:84px 1fr;padding:16px}
  .state{padding:0 16px 14px}
  .layout>main{border-left:0;border-right:0;margin:0 calc(var(--gut) * -1)}
}
.layout{scroll-margin-top:96px}

.cafe .tag{background:var(--fluo);color:var(--ink);font-weight:600}
.act.main svg{color:var(--fluo)}
.side .on{box-shadow:inset 3px 0 0 var(--fluo)}