/* ============================================================
   OPTI. — « Mon plein », le plan de course
   Même direction artistique que le catalogue, mais en lecture continue :
   on ne butine pas cette page, on la suit du haut vers le bas.
   ============================================================ */

.pl-head{
  background:var(--yellow);
  background-image:radial-gradient(#00000012 1.5px,transparent 1.5px);
  background-size:16px 16px;
  border-bottom:3px solid var(--black);
  padding:18px 16px 22px;
}
.pl-back{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  color:var(--black);text-decoration:none;border-bottom:2px solid var(--black);
}
.pl-brand{
  font-family:var(--disp);font-size:40px;line-height:.95;letter-spacing:-1.5px;
  margin-top:14px;
}
.pl-brand span{color:var(--red)}
.pl-tag{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:3px;margin:8px 0 14px}
.pl-intro{font-size:14.5px;line-height:1.55;font-weight:500}

/* ---------------------------------------------------------------- choix */
.pl-choix{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.pl-choix > div{flex:1;min-width:150px}
.pl-choix label{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:1.5px;margin-bottom:5px;
}
.pl-choix select,.pl-choix input{
  width:100%;font-family:var(--ui);font-size:14px;padding:9px 10px;
  border:2.5px solid var(--black);background:#fff;
}

/* ---------------------------------------------------------------- blocs */
.pl-bloc{margin:26px 0}
.pl-bloc h2{
  font-family:var(--disp);font-size:17px;letter-spacing:-.4px;
  border-bottom:2.5px solid var(--black);padding-bottom:8px;margin-bottom:10px;
}
.pl-bloc h3{font-family:var(--disp);font-size:13.5px;letter-spacing:-.2px;margin-bottom:3px}
.pl-sub{font-size:13px;line-height:1.55;margin-bottom:14px}
.pl-note{font-size:12.5px;line-height:1.5;color:#4a4a4a;margin-top:6px}
.pl-vide{font-size:13px;line-height:1.55;color:#4a4a4a}

/* L'acceptation : c'est la première chose à savoir, elle est traitée en grand. */
.pl-acc{
  border:2.5px solid var(--black);padding:14px 15px;
  box-shadow:5px 5px 0 var(--black);
}
.pl-acc h2{border-bottom-width:2px;font-size:15px}
.pl-acc p{font-size:13.5px;line-height:1.55}
.pl-acc.ok{background:#F2FFF6}
.pl-acc.warn{background:#FFFBEA}
.pl-acc.bad{background:#FFF1F1}
.pl-q{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;margin-top:10px;
  border-left:3px solid var(--black);padding-left:9px;
}

/* Avant de partir. */
.pl-etapes{list-style:none;counter-reset:e}
.pl-etapes li{
  counter-increment:e;position:relative;padding-left:34px;margin-bottom:14px;
  font-size:14px;line-height:1.45;
}
.pl-etapes li::before{
  content:counter(e);position:absolute;left:0;top:0;
  font-family:var(--disp);font-size:12px;width:24px;height:24px;
  display:grid;place-items:center;background:var(--black);color:var(--yellow);
}
.pl-etapes li p{font-size:12.5px;line-height:1.5;color:#4a4a4a;margin-top:4px}
.pl-quand{font-family:var(--mono);font-size:10px;letter-spacing:1px;
  background:var(--yellow);border:2px solid var(--black);padding:1px 5px;white-space:nowrap}

/* Les opérations. */
.pl-op{
  border:2.5px solid var(--black);background:#fff;padding:12px 14px;
  margin-bottom:10px;box-shadow:4px 4px 0 var(--black);
}
.pl-op-titre{font-size:15px;font-weight:700;line-height:1.35}
.pl-op-meta{font-family:var(--mono);font-size:10.5px;color:#4a4a4a;margin-top:5px}
.pl-op-lim{font-size:12.5px;color:#4a4a4a;margin-top:6px;line-height:1.45}
.pl-op-note{font-size:12.5px;line-height:1.5;margin-top:7px}
.pl-op-warn{
  font-size:12.5px;line-height:1.5;margin-top:8px;background:#FFD1D1;
  border:2px solid var(--black);padding:7px 9px;
}
.pl-perm{border:2.5px dashed var(--black);padding:11px 13px;margin-top:12px}
.pl-perm-t{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.5px;margin-bottom:7px}
.pl-perm ul{padding-left:18px}
.pl-perm li{font-size:12.5px;line-height:1.5;margin-bottom:4px}

/* Rayon par rayon. */
.pl-rayon{margin-bottom:20px}
.pl-rayon-op{
  font-family:var(--mono);font-size:10.5px;line-height:1.45;color:#4a4a4a;
  border-bottom:2px dashed var(--black);padding-bottom:7px;margin-bottom:9px;
}
.pl-liste{list-style:none}
.pl-liste li{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px dashed #0002;
}
.pl-montant{
  font-family:var(--disp);font-size:14px;background:var(--yellow);
  border:2px solid var(--black);padding:2px 7px;white-space:nowrap;
}
.pl-produit{flex:1;min-width:180px;font-size:13px;line-height:1.4}
.pl-autres{font-family:var(--mono);font-size:9.5px;color:#6b6b6b;white-space:nowrap}

.pl-total{
  border:3px solid var(--black);background:var(--yellow);padding:14px 15px;
  box-shadow:6px 6px 0 var(--black);margin-top:18px;
}
.pl-total-l{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px}
.pl-total-v{font-family:var(--disp);font-size:38px;line-height:1.05;margin:4px 0 8px}
.pl-total-n{font-size:12.5px;line-height:1.5}

/* Réflexes et réserves. */
.pl-reflexes{list-style:none;counter-reset:r}
.pl-reflexes li{
  counter-increment:r;position:relative;padding-left:30px;margin-bottom:12px;
  font-size:13.5px;line-height:1.45;
}
.pl-reflexes li::before{
  content:counter(r) ".";position:absolute;left:0;top:0;
  font-family:var(--mono);font-weight:700;font-size:12px;
}
.pl-reflexes li p{font-size:12.5px;line-height:1.5;color:#4a4a4a;margin-top:3px}

.pl-reserves{border:2.5px solid var(--black);padding:14px 15px;background:#fff}
.pl-reserves ul{padding-left:18px}
.pl-reserves li{font-size:13px;line-height:1.55;margin-bottom:7px}

.pl-foot{
  font-family:var(--mono);font-size:10px;line-height:1.5;color:#6b6b6b;
  border-top:2.5px solid var(--black);padding-top:12px;margin-top:26px;
}

@media (min-width:520px){
  .app{max-width:640px}
  .pl-brand{font-size:52px}
}