/* Apparence de la page de connexion : librement modifiable (voir CONTRAT.md). */
:root{
  --encre:#14213D;
  --papier:#FAFBFC;
  --surface:#FFFFFF;
  --filet:#E4E6EB;
  --gris:#6E7480;
  --gris-clair:#9BA1AC;
  --laiton:#B08D57;
  --vert:#2E7D5B;
  --vert-fond:#F1F8F4;
  --rouge:#A23B3B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--papier);
  color:var(--encre);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.carte{
  background:var(--surface);
  border:1px solid var(--filet);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(20,33,61,.04),0 12px 32px -12px rgba(20,33,61,.10);
  max-width:500px;width:100%;
  padding:38px 38px 34px;
}

/* en-tête : marque + rail de progression */
.tete{margin-bottom:30px}
.marque{
  font-size:12px;font-weight:600;letter-spacing:.22em;
  color:var(--encre);text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.marque::after{content:"";flex:1;height:1px;background:var(--filet)}
.rail{display:flex;gap:5px;margin-top:14px}
.rail span{flex:1;height:2px;background:var(--filet);border-radius:1px;transition:background .35s ease}
.rail span.on{background:var(--laiton)}
.etape{font-size:11px;letter-spacing:.06em;color:var(--gris-clair);margin-top:9px;text-transform:uppercase;font-weight:500}

h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:25px;font-weight:400;letter-spacing:-.01em;
  line-height:1.25;margin-bottom:9px;
}
.sous{font-size:14.5px;color:var(--gris);margin-bottom:26px}
.vue{animation:entree .22s ease both}
@keyframes entree{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:7px}
input,select{
  width:100%;padding:13px 14px;
  border:1px solid var(--filet);border-radius:9px;
  font-size:15.5px;font-family:inherit;color:var(--encre);
  background:var(--surface);transition:border-color .15s ease;
}
select{padding:10px 12px;font-size:14px}
input::placeholder{color:var(--gris-clair)}
input:hover,select:hover{border-color:#D2D6DE}
input:focus,select:focus{outline:none;border-color:var(--laiton);box-shadow:0 0 0 3px rgba(176,141,87,.14)}
.aide{font-size:12.5px;color:var(--gris-clair);margin:8px 0 22px;min-height:17px}
.aide b{color:var(--gris);font-weight:600}
.aide.ok{color:var(--vert)}

button,.bouton{
  display:block;width:100%;padding:13px;text-align:center;text-decoration:none;
  background:var(--encre);color:#fff;
  border:none;border-radius:9px;
  font-size:15px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:background .15s ease;
}
button:hover:not(:disabled),.bouton:hover{background:#1E2F55}
button:disabled{background:#B9BEC8;cursor:default}
button:focus-visible,.bouton:focus-visible{outline:2px solid var(--laiton);outline-offset:2px}
.bouton.second{background:var(--surface);color:var(--encre);border:1px solid var(--filet)}
.bouton.second:hover{background:var(--papier)}
.mini{display:inline-block;width:auto;padding:3px 9px;font-size:12px;border-radius:6px;background:var(--papier);color:var(--encre);border:1px solid var(--filet);margin-left:6px;vertical-align:1px}
.mini:hover:not(:disabled){background:var(--filet)}

/* services */
.svc{display:flex;gap:15px;padding:20px 0;border-top:1px solid var(--filet)}
.svc:last-of-type{border-bottom:1px solid var(--filet);margin-bottom:24px}
.svc-ic{
  width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--filet);border-radius:9px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
}
.svc-ic svg{width:19px;height:19px;display:block}
.svc-corps{flex:1;min-width:0}
.svc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.svc-nom{font-size:14.5px;font-weight:600}
.svc-meta{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-clair);font-weight:500;white-space:nowrap}
.svc-txt{font-size:13.5px;color:var(--gris);margin-top:4px}
.svc-bas{margin-top:14px}
.svc-bas button,.svc-bas .bouton{padding:10px;font-size:14px}
.fait{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--vert);margin-top:12px;overflow-wrap:anywhere}
.fait svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fait a{font-weight:500;color:var(--gris);margin-left:auto;white-space:nowrap;font-size:12.5px}
.detail{font-size:12.5px;color:var(--gris);margin-top:10px}
.detail label{font-weight:500;color:var(--gris);font-size:12.5px;letter-spacing:0}
.detail .aide{margin:6px 0 0;min-height:0}

/* formulaire du code */
.form{margin-top:16px}
.pas{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--filet)}
.pas:first-child{border-top:none;padding-top:0}
.num{
  font-family:Georgia,serif;font-size:15px;color:var(--laiton);
  width:18px;flex-shrink:0;text-align:center;line-height:1.45;
}
.pas-t{font-size:13.5px;color:var(--encre);line-height:1.55;flex:1;min-width:0}
.pas-t em{font-style:normal;font-weight:600}
.pas-t .bouton{margin-top:9px;padding:9px;font-size:13.5px}
.petit{font-size:12.5px;color:var(--gris);margin-top:8px}
.petit a{color:var(--encre)}
.champs{border-top:1px solid var(--filet);padding-top:14px;margin-top:2px}
.champs input{margin-bottom:14px}
.champs .aide{margin:-6px 0 16px}
#code{letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* qr */
.qr-zone{margin-top:16px}
.qr-cadre{
  width:216px;height:216px;margin:0 auto;
  border:1px solid var(--filet);border-radius:11px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.qr-cadre img{width:100%;height:100%;object-fit:contain}
.tourne{width:24px;height:24px;border:2.5px solid var(--filet);border-top-color:var(--gris-clair);border-radius:50%;animation:tour .8s linear infinite}
@keyframes tour{to{transform:rotate(360deg)}}
.qr-txt{font-size:13px;color:var(--gris);margin-top:16px;line-height:1.6}
.qr-txt b{color:var(--encre);font-weight:600}
.qr-intro{margin-bottom:10px}
.plat{display:flex;gap:11px;padding:8px 0;border-top:1px solid var(--filet)}
.plat-n{
  flex-shrink:0;width:52px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--laiton);padding-top:2px;
}
.plat-c{flex:1}
.qr-fin{margin-top:10px;padding-top:10px;border-top:1px solid var(--filet)}

/* alerte */
.alerte{font-size:13.5px;line-height:1.55;padding:13px 15px;border-radius:9px;margin-bottom:20px;background:var(--papier);border:1px solid var(--filet);color:var(--encre)}
.alerte.locale{margin:12px 0 0}

/* fin */
.fin{text-align:center;padding:6px 0}
.sceau{width:64px;height:64px;border-radius:50%;background:var(--vert-fond);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.sceau svg{width:30px;height:30px;stroke:var(--vert);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.trace{stroke-dasharray:50;stroke-dashoffset:50;animation:tracer .45s .12s ease forwards}
@keyframes tracer{to{stroke-dashoffset:0}}
.fin h1{margin-bottom:10px}
.fin .sous{margin-bottom:0}

.pied{font-size:12.5px;color:var(--gris-clair);text-align:center;margin-top:22px;line-height:1.6}
.cache{display:none!important}

@media (max-width:520px){
  body{padding:20px 14px}
  .carte{padding:28px 20px 26px;border-radius:12px}
  h1{font-size:22px}
  .qr-cadre{width:100%;max-width:216px;height:auto;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}