/* ==========================================================================
   RETROVAULT — compte.css · v4 « BENTO × MEMPHIS » (docs/DA-SPEC.md §12)

   COMPTES CLIENTS : mon-vault.html (« Mon compte », .pg-compte),
   recherche.html (.pg-recherche), le bloc « enregistrer la demande » du
   panneau TRANSMETTRE, et l'onglet DEMANDES de l'arrière-boutique.

   Règle v4 : aucune couleur en dur (tokens uniquement), coins ronds partout,
   ombres colorées décalées, pilules, aucun steps(), aucune capitale
   décorative, aucun emoji.

   Préfixes : .mv- (mon compte) · .rc- (recherche) · .fo-dem- (panneau)
              .dem- (arrière-boutique)
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. PANNEAU TRANSMETTRE — bloc « enregistrer la demande »
   (la base de .fo-dem vit dans forgeos.css §15 : ici, les libellés)
   ══════════════════════════════════════════════════════════════════════════ */
.fo-dem-t {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s);
  color: var(--encre); margin: 0 0 var(--s-2);
}
.fo-dem-aide { font-size: 14px; color: var(--gris); line-height: 1.5; margin: 0 0 var(--s-3); }
.fo-dem-mail { margin-bottom: var(--s-3); }
.fo-dem-mail label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--indigo-txt); margin-bottom: 6px;
}
.fo-dem .btn, .fo-dem .pill { width: 100%; }
.fo-dem-ko { font-size: 14px; color: var(--rose-txt); line-height: 1.5; margin: var(--s-2) 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   2. MON COMPTE (.pg-compte) — ossature
   ══════════════════════════════════════════════════════════════════════════ */
.pg-compte .mv-wrap,
.pg-recherche .rc-wrap { max-width: 1000px; padding-block: 34px 56px; }
.pg-compte .mv-wrap > * + * { margin-top: var(--s-5); }

.pg-compte .mv-head { position: relative; padding-block: 8px 0; }
.pg-compte .mv-head > .fo-formes { inset: -20px -10px 0; }
.pg-compte .mv-head-in { position: relative; z-index: 1; }
.pg-compte .mv-head h1, .pg-compte .mv-head h2 { font-size: clamp(32px, 5.4vw, 48px); margin: 4px 0 var(--s-4); }
.mv-sub { font-size: var(--c-l); color: var(--gris); line-height: 1.6; max-width: 62ch; }
.mv-sub b { color: var(--encre); font-weight: 600; }

/* Barre de compte */
.mv-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: 16px 20px;
}
.mv-bar-who { flex: 1 1 200px; font-size: var(--c-s); color: var(--gris); word-break: break-word; }
.mv-bar-who b { color: var(--encre); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   3. MON COMPTE — écran de connexion (carte G-Connexion réutilisée)
   ══════════════════════════════════════════════════════════════════════════ */
.pg-compte .adl { min-height: calc(100vh - var(--header-h) - 60px); border-radius: var(--r-3); }
.pg-compte .adl > .fo-formes {
  inset: auto; left: 50%; top: 50%;
  width: 560px; height: 720px; max-width: 100vw;
  transform: translate(-50%, -50%); overflow: visible;
}
.pg-compte .adl > .fo-formes svg { position: static; width: 100%; height: 100%; }

.mv-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-modes .key { flex: 1 1 0; min-width: 120px; justify-content: center; font-size: 14.5px; padding: 12px 14px; }

.mv-form { display: flex; flex-direction: column; gap: 14px; }
.mv-form .pill { width: 100%; }
.mv-oauth { display: grid; gap: 10px; }
.mv-oauth .pill, .mv-oauth .btn { width: 100%; }

.mv-msg { font-size: 14.5px; line-height: 1.5; color: var(--gris); margin: var(--s-3) 0 0; }
.mv-msg:empty { margin: 0; }
.mv-msg.is-ok { color: var(--menthe-nuit); font-weight: 600; }
.mv-msg.is-ko { color: var(--rose-txt); font-weight: 600; }
.mv-legal { font-size: 14px; color: var(--gris-2); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════════════════
   4. MON COMPTE — liste des demandes (cartes bento)
   ══════════════════════════════════════════════════════════════════════════ */
.mv-liste { display: grid; gap: var(--bento-gap); }

.mv-dem {
  border-radius: var(--r-2); overflow: hidden;
  background: var(--blanc); border: 1.5px solid var(--bord-carte);
  box-shadow: 8px 10px 0 var(--omb-indigo);
  transition: box-shadow var(--step-med) var(--ease-standard);
}
.mv-dem.is-ouvert { box-shadow: 8px 10px 0 var(--omb-rose); }

.mv-dem-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s-3);
  width: 100%; text-align: left; border: 0; background: var(--blanc);
  padding: 18px 20px; min-height: 64px; color: var(--encre);
  font-family: var(--f-corps); font-size: var(--c-s); cursor: pointer;
  transition: background var(--step-fast) var(--ease-standard);
}
.mv-dem-bar:hover { background: var(--indigo-pale); }
.mv-dem-ref {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo); color: #fff;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.mv-dem-type {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.mv-dem-sujet {
  flex: 1 1 160px; min-width: 0;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-dem-date { flex: 0 0 auto; color: var(--gris-2); font-size: 13px; font-weight: 500; }
.mv-dem-chev { flex: 0 0 auto; color: var(--indigo); font-size: 12px; }

/* Pastille de statut — une pilule, une couleur par étape */
.mv-st {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-p); padding: 6px 13px;
  font-size: 12.5px; font-weight: 600;
  background: var(--indigo-pale); color: var(--indigo-txt);
}
.mv-st::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-p); background: currentColor; }
.mv-st.st-recue    { background: var(--indigo-pale); color: var(--indigo-txt); }
.mv-st.st-devis    { background: var(--jaune-pale); color: var(--jaune-txt); }
.mv-st.st-atelier  { background: var(--rose-pale); color: var(--rose-txt); }
.mv-st.st-prete    { background: var(--menthe-pale); color: var(--menthe-nuit); }
.mv-st.st-terminee { background: var(--surface-2); color: var(--gris-2); }
.mv-st.st-refusee  { background: var(--rose-pale); color: var(--rose-txt); }

.mv-dem-corps {
  padding: 4px 20px 22px; display: grid; gap: var(--s-5);
  border-top: 1.5px solid var(--bord-carte);
}
.mv-dem-corps > div:first-child { padding-top: var(--s-4); }

.mv-bloc-t {
  font-size: 13px; font-weight: 600; color: var(--indigo-txt);
  margin: 0 0 var(--s-2);
}
.mv-pre {
  font-family: var(--f-corps); font-size: 14.5px; color: var(--encre); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  border-radius: var(--r-1); background: var(--indigo-pale);
  padding: 14px 16px; margin: 0;
}
.mv-reponse { border-radius: var(--r-2); background: var(--jaune-pale); padding: 18px 20px; }
.mv-reponse .mv-bloc-t { color: var(--jaune-txt); }
.mv-reponse p { font-size: var(--c-m); color: var(--encre); line-height: 1.6; margin: 0; white-space: pre-wrap; }

/* Fil de messages */
.mv-fil { display: grid; gap: 10px; }
.mv-m { border-radius: var(--r-2); background: var(--blanc); border: 1.5px solid var(--bord-carte); padding: 13px 16px; }
.mv-m-h { font-size: 12.5px; font-weight: 600; color: var(--gris-2); margin-bottom: 5px; }
.mv-m.est-atelier { background: var(--indigo-pale); border-color: transparent; }
.mv-m.est-atelier .mv-m-h { color: var(--indigo-txt); }
.mv-m p { font-size: 15px; color: var(--encre); line-height: 1.55; margin: 0; white-space: pre-wrap; word-break: break-word; }
.mv-vide { font-size: 14.5px; color: var(--gris-2); margin: 0; }

.mv-envoi { display: grid; gap: 10px; justify-items: start; }
.mv-ta { width: 100%; min-height: 96px; resize: vertical; }
.mv-envoi .pill, .mv-envoi .btn { justify-self: start; }
@media (max-width: 560px) {
  .mv-envoi .pill, .mv-envoi .btn { justify-self: stretch; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. PROPOSITIONS (recherche sur demande)
   ══════════════════════════════════════════════════════════════════════════ */
.mv-props { display: grid; gap: var(--s-4); }
.mv-prop {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  border-radius: var(--r-2); background: var(--blanc);
  border: 1.5px solid var(--bord-carte);
  box-shadow: 8px 10px 0 var(--omb-rose);
  padding: 18px 20px;
}
@media (min-width: 620px) {
  .mv-prop.a-photo { grid-template-columns: 148px 1fr; align-items: start; }
}
.mv-prop-photo {
  width: 100%; max-width: 148px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-1); background: var(--indigo-pale);
}
.mv-prop-t { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); line-height: 1.15; margin: 0 0 8px; }
.mv-prop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gris-2); margin: 0 0 12px; }
.mv-prop-prix {
  border-radius: var(--r-p); background: var(--violet); color: #fff;
  padding: 6px 14px; font-family: var(--f-titre); font-weight: 700; font-size: 19px;
}
.mv-prop p.mv-prop-txt { font-size: var(--c-m); color: var(--gris); line-height: 1.6; margin: 0 0 var(--s-4); white-space: pre-wrap; }
.mv-prop-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.mv-prop.est-acceptee { box-shadow: 8px 10px 0 var(--omb-jaune); }
.mv-prop.est-refusee { opacity: .78; box-shadow: none; }
.mv-prop-verdict {
  display: inline-flex; align-items: center; border-radius: var(--r-p);
  background: var(--menthe-pale); color: var(--menthe-nuit);
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; margin: 0;
}
.mv-prop.est-refusee .mv-prop-verdict { background: var(--surface-2); color: var(--gris-2); }
@media (max-width: 480px) {
  .mv-prop-acts .pill, .mv-prop-acts .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. CTA « recherche sur demande »
   ══════════════════════════════════════════════════════════════════════════ */
.mv-cta { padding: 32px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mv-cta h2 { margin: 0; font-size: var(--t-xl); color: var(--corail-encre); }
.mv-cta p { font-size: var(--c-m); color: var(--corail-encre); line-height: 1.6; margin: 0; max-width: 64ch; }
.mv-cta p b { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   7. PAGE RECHERCHE SUR DEMANDE (.pg-recherche) — formulaire 4 étapes
   ══════════════════════════════════════════════════════════════════════════ */
.pg-recherche .rc-wrap { display: flex; flex-direction: column; gap: 40px; }
.pg-recherche .sect { padding-top: 0; }

/* P10 — en-tête bento commun : bloc indigo 7 colonnes + photo 5 colonnes.
   Les formes de fond restent SOUS les blocs, jamais derrière le texte. */
.pg-recherche .rc-head { position: relative; padding-block: 10px 0; }
.pg-recherche .rc-head > .fo-formes { inset: -24px -10px 0; }
.pg-recherche .rc-head .bento-grid { position: relative; z-index: 1; }
.pg-recherche .tete-bloc {
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 340px; justify-content: center;
}
.pg-recherche .tete-bloc h1 { font-size: var(--t-hero); color: #fff; margin: 0; }
.pg-recherche .tete-bloc .kick { align-self: flex-start; margin-bottom: 0; }
.pg-recherche .tete-p {
  max-width: 48ch; font-size: var(--c-l); line-height: 1.55;
  color: var(--indigo-sur); margin: 0;
}
.pg-recherche .tete-p b { color: #fff; font-weight: 600; }
.pg-recherche .tete-photo { min-height: 340px; background: var(--indigo-pale); }
.pg-recherche .tete-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 34px;
}
.pg-recherche .tete-photo .tag-photo { position: absolute; left: 18px; bottom: 18px; }

@media (max-width: 1080px) {
  .pg-recherche .tete-bloc { padding: 34px 30px; min-height: 0; }
  .pg-recherche .tete-photo { min-height: 240px; }
}

.rc-form { display: flex; flex-direction: column; gap: var(--bento-gap); }

/* --- Une étape = une carte bento numérotée --------------------------------- */
.rc-etape-bloc .win-bar { align-items: center; gap: var(--s-3); padding-top: 22px; }
.rc-etape-bloc .num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-p);
  display: grid; place-items: center;
  background: var(--noir); color: #fff;
  font-family: var(--f-titre); font-weight: 600; font-size: 17px;
}
.rc-etape-bloc .win-t { flex: 1 1 auto; }

.rc-champ { display: flex; flex-direction: column; gap: 8px; }
.rc-champ .label { margin-bottom: 0; }

/* --- Étape 1 : la machine, en blocs photo ---------------------------------- */
.rc-fams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .rc-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rc-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rc-fam {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  border-radius: var(--r-2); border: 1.5px solid var(--bord-champ);
  background: var(--blanc); padding: 12px 12px 16px; cursor: pointer;
  transition: border-color var(--step-fast) var(--ease-standard), transform var(--step-fast) var(--ease-standard),
              box-shadow var(--step-fast) var(--ease-standard);
}
.rc-fam:hover { transform: translateY(-3px); border-color: var(--indigo); }
.rc-fam input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-fam input:focus-visible ~ .rc-fam-photo { outline: 3px solid var(--indigo); outline-offset: 3px; }
.rc-fam-photo {
  display: grid; place-items: center; border-radius: var(--r-1);
  background: var(--indigo-pale); aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 4px;
}
.rc-fam-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.rc-fam-photo.vide { background: var(--jaune-pale); }
.rc-fam-nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); line-height: 1.1; }
.rc-fam-sous { font-size: 12.5px; color: var(--gris-2); line-height: 1.4; }
.rc-fam.est-choisie {
  border-color: var(--indigo); box-shadow: 6px 8px 0 var(--omb-indigo);
}
.rc-fam.est-choisie .rc-fam-photo { background: var(--indigo-clair); }

/* --- Étape 3 : le budget, en slider ---------------------------------------- */
.rc-slider { display: flex; flex-direction: column; gap: 10px; }
.rc-budget-val {
  align-self: flex-start; border-radius: var(--r-p);
  background: var(--jaune); color: var(--jaune-encre);
  padding: 9px 18px; font-family: var(--f-titre); font-weight: 600; font-size: var(--e-m);
}
.pg-recherche input[type="range"] {
  width: 100%; height: 34px; padding: 0; background: none; border: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pg-recherche input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-p); background: var(--indigo-pale);
}
.pg-recherche input[type="range"]::-moz-range-track {
  height: 10px; border-radius: var(--r-p); background: var(--indigo-pale);
}
.pg-recherche input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -9px;
  border-radius: var(--r-p); background: var(--indigo); border: 3px solid var(--blanc);
  box-shadow: 0 0 0 1.5px var(--indigo);
}
.pg-recherche input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: var(--r-p);
  background: var(--indigo); border: 3px solid var(--blanc);
  box-shadow: 0 0 0 1.5px var(--indigo);
}
.rc-bornes { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--gris-2); font-weight: 600; }

/* --- Étape 4 : le récapitulatif indigo ------------------------------------- */
.rc-recap { margin-top: var(--s-5); padding: 24px 26px; color: #fff; }
.rc-recap-t { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s-4); }
.rc-recap-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 560px) { .rc-recap-l { grid-template-columns: minmax(0, 1fr); } }
.rc-recap-l dt { font-size: 12.5px; font-weight: 600; color: var(--indigo-sur); margin-bottom: 5px; }
.rc-recap-l dd {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s);
  line-height: 1.25; color: #fff; word-break: break-word;
}

/* --- « Comment ça marche » -------------------------------------------------- */
.rc-comment .rc-etape {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 24px;
}
.rc-etape > b {
  align-self: flex-start; width: 34px; height: 34px; border-radius: var(--r-p);
  display: grid; place-items: center;
  background: var(--indigo); color: #fff;
  font-family: var(--f-titre); font-weight: 600; font-size: 17px;
}
.rc-etape > span { font-size: 15px; line-height: 1.6; color: var(--gris); }
.rc-etape > span b { color: var(--encre); font-weight: 600; }

/* --- Listes à pilules ------------------------------------------------------- */
.pg-recherche .log li, .pg-compte .log li { padding-left: 0; display: flex; gap: 12px; align-items: flex-start; }
.pg-recherche .log li::before, .pg-compte .log li::before { content: none; }
.pg-recherche .log .tag, .pg-compte .log .tag {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  font-family: var(--f-titre); font-weight: 600; font-size: 12.5px;
  min-width: 36px; padding: 4px 10px; text-align: center;
}
.pg-recherche .log li > span:last-child { font-size: var(--c-m); line-height: 1.6; color: var(--gris); }

/* ══════════════════════════════════════════════════════════════════════════
   8. ARRIÈRE-BOUTIQUE — onglet DEMANDES (admin.html + js/admin-demandes.js)
   Réutilise .mv-st / .mv-pre / .mv-fil / .mv-m / .mv-ta / .mv-props / .mv-prop.
   ══════════════════════════════════════════════════════════════════════════ */
#dem-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-4); }
#dem-filtres .key { flex: 0 1 auto; font-size: 14px; padding: 10px 16px; min-height: 44px; }

#dem-liste { display: grid; gap: var(--s-4); }

.dem {
  border-radius: var(--r-2); overflow: hidden;
  background: var(--blanc); border: 1.5px solid var(--bord-carte);
  box-shadow: 8px 10px 0 var(--omb-indigo);
}
.dem.is-ouvert { box-shadow: 8px 10px 0 var(--omb-rose); }

.dem-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s-3);
  width: 100%; text-align: left; border: 0; background: var(--blanc);
  padding: 16px 18px; min-height: 60px; color: var(--encre);
  font-size: var(--c-s); cursor: pointer;
  transition: background var(--step-fast) var(--ease-standard);
}
.dem-bar:hover { background: var(--indigo-pale); }
.dem-ref {
  flex: 0 0 auto; border-radius: var(--r-p); background: var(--indigo); color: #fff;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.dem-type {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.dem-sujet {
  flex: 1 1 180px; min-width: 0;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dem-mail, .dem-date { flex: 0 0 auto; color: var(--gris-2); font-size: 13px; font-weight: 500; }
@media (max-width: 640px) {
  .dem-mail { flex-basis: 100%; word-break: break-all; }
  .dem-sujet { flex-basis: 100%; white-space: normal; }
}

.dem-corps { padding: var(--s-4) 18px 22px; display: grid; gap: var(--s-5); border-top: 1.5px solid var(--bord-carte); }
.dem-sts { display: flex; flex-wrap: wrap; gap: 8px; }
.dem-sts .key { flex: 0 1 auto; font-size: 13.5px; padding: 10px 15px; min-height: 44px; }
.dem-meta { font-size: 13.5px; color: var(--gris-2); margin: 0; word-break: break-word; }
.dem-meta a { color: var(--indigo); font-weight: 600; }
.dem-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-2); }
@media (max-width: 560px) { .dem-acts .btn, .dem-acts .pill { width: 100%; } }

.dem-prop-form { border-radius: var(--r-2); background: var(--rose-pale); padding: 18px 20px; }
.dem-prop-form > summary {
  list-style: none; cursor: pointer;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); color: var(--rose-txt);
  min-height: 44px; display: flex; align-items: center;
}
.dem-prop-form > summary::-webkit-details-marker { display: none; }
.dem-prop-grid { display: grid; gap: var(--s-3); margin: var(--s-3) 0; }
@media (min-width: 620px) { .dem-prop-grid { grid-template-columns: 1fr 1fr; } }
.dem-prop-form .mv-lab, .dem-prop-form label {
  display: block; font-size: 13px; font-weight: 600; color: var(--rose-txt);
}
.dem-prop-form .ad-in, .dem-prop-form .mv-ta { width: 100%; margin-top: 6px; }

#dem-msg { margin: 0 0 var(--s-3); }

/* ══════════════════════════════════════════════════════════════════════════
   9. Petits écrans (320 px) : aucun débordement
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .mv-dem-sujet, .dem-sujet { flex-basis: 100%; white-space: normal; }
  .mv-modes .key { flex: 1 1 100%; }
  .pg-compte .adl { padding: var(--s-5) var(--s-3); }
}