/* soldes.css -- LES ECRANS DE DN-06 (C1 soldes, C2 regler, C3 a qui le tour, D3 un resto, E2 moi), telephone d'abord.
 *
 * Declaree par `registre.style_page("css/soldes.css")` (vues_soldes) ; chargee apres socle.css. La forme des maquettes v1
 * de Diners. AUCUNE couleur litterale : que des var() des jetons. Classes prefixees « sl- ».
 */

.sl { display: flex; flex-direction: column; gap: var(--dv-px-12); min-width: 0; }
.sl > * { max-width: 100%; min-width: 0; }
.sl ul, .sl ol { list-style: none; margin: 0; padding: 0; }
.sl-liste { display: flex; flex-direction: column; gap: var(--dv-px-8); }
.sl-colonne { flex-direction: column; align-items: stretch; }
.sl-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dv-px-10); }
.sl-deux > * { min-width: 0; }
.sl-deux form { display: flex; }
.sl-deux .btn { flex: 1; min-width: 0; width: 100%; padding: 0 var(--dv-px-8); }
.sl-droite { margin-left: auto; }

.sl-retour { display: inline-flex; align-items: center; gap: var(--dv-px-6); min-height: var(--m-cible);
  font-weight: var(--dv-graisse-700); font-size: var(--dv-pt-16); color: var(--texte); text-decoration: none; min-width: 0; }
.sl-retour span { overflow-wrap: anywhere; }

.sl-sous { display: flex; justify-content: space-between; align-items: baseline; margin: var(--dv-px-4) var(--dv-px-2) 0;
  font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-700); color: var(--texte-doux); text-transform: uppercase; }

/* ---- les montants ---- */
.sl-montant { font-weight: var(--dv-graisse-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-montant--dois { color: var(--danger); }
.sl-montant--du { color: var(--succes); }
.sl-net { flex-direction: column; align-items: center; gap: var(--dv-px-4); }
.sl-net__montant { font-size: calc(var(--dv-pt-22) * 1.5); font-weight: var(--dv-graisse-700); font-variant-numeric: tabular-nums; }
.sl-grand { width: var(--m-px-52); height: var(--m-px-52); font-size: var(--dv-pt-16); }

/* ---- C1 : une ligne par paire ---- */
.sl-ligne { flex-wrap: wrap; }
.sl-ligne__qui { display: flex; flex-direction: column; gap: var(--dv-px-2); flex: 1; min-width: 0; }
.sl-ligne__qui b { overflow-wrap: anywhere; }
.sl-ligne__action { flex-basis: 100%; }
a.sl-ligne__action { min-height: var(--m-cible); }
.sl-attente { display: flex; flex-direction: column; gap: var(--dv-px-8); }
.sl-attente__carte { flex-direction: column; align-items: stretch; border-color: var(--alerte-texte); }
.sl-attente__texte { display: flex; align-items: center; gap: var(--dv-px-8); margin: 0; }
.sl-attente .btn { min-height: var(--m-cible); }

/* ---- C2 : le moyen (aucun pris d'avance), le courriel Interac ---- */
.sl-moyens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dv-px-10); margin: 0; padding: 0; border: 0; min-width: 0; }
.sl-moyen { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--dv-px-8);
  min-height: var(--m-bouton); border: 1px solid var(--bordure-forte); border-radius: var(--dv-px-999); background: var(--fond);
  color: var(--texte); font-weight: var(--dv-graisse-600); cursor: pointer; }
.sl-moyen__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl-moyen:has(.sl-moyen__radio:checked) { background: var(--primaire); border-color: var(--primaire); color: var(--texte-inverse); }
.sl-moyen:has(.sl-moyen__radio:focus-visible) { outline: var(--dv-px-2) solid var(--primaire-fonce); outline-offset: var(--dv-px-2); }
.sl-interac { min-width: 0; }
.sl-interac__courriel { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--dv-pt-13); }
form:has(.sl-moyen__radio[value="comptant"]:checked) .sl-interac { display: none; }
.sl-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--m-cible); height: var(--m-cible);
  flex: none; border: 0; border-radius: var(--dv-px-8); background: none; color: var(--lien); cursor: pointer; }

/* ---- C3 : les rangs ---- */
.sl-tour { display: flex; flex-direction: column; gap: var(--dv-px-8); }
.sl-tour__ligne { flex-direction: column; align-items: stretch; }
.sl-tour__ligne--premier { border-color: var(--succes); }
.sl-tour__tete { display: flex; align-items: center; gap: var(--dv-px-8); min-width: 0; }
.sl-tour__tete b { overflow-wrap: anywhere; }
.sl-rang { display: inline-flex; align-items: center; justify-content: center; width: var(--dv-px-24); height: var(--dv-px-24);
  flex: none; border-radius: var(--dv-px-999); background: var(--texte-doux); color: var(--texte-inverse);
  font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-700); }
.sl-tour__ligne--premier .sl-rang { background: var(--succes); }
.sl .pastille .ic { width: var(--dv-px-12); height: var(--dv-px-12); }

/* ---- D3 : un resto ---- */
.sl-lien { min-height: var(--m-cible); }
.sl-consignes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sl-plat { display: flex; justify-content: space-between; gap: var(--dv-px-8); padding: var(--dv-px-6) 0; }
.sl-plat + .sl-plat { border-top: 1px solid var(--bordure-fine); }
.sl-plat span:first-child { overflow-wrap: anywhere; min-width: 0; }
.sl-voies-fiche { display: flex; flex-wrap: wrap; gap: var(--dv-px-6) var(--dv-px-12); }
.sl-voie-fiche { display: inline-flex; align-items: center; gap: var(--dv-px-4); font-size: var(--dv-pt-13);
  font-weight: var(--dv-graisse-600); color: var(--texte-doux); }
.sl-voie-fiche .ic { flex: none; }
.sl-adresse { display: flex; align-items: flex-start; gap: var(--dv-px-6); margin: 0; overflow-wrap: anywhere; }
.sl-adresse .ic { flex: none; }
.sl-adresse span { min-width: 0; }

/* ---- DN-22 : creer / modifier un resto (une colonne, de grandes cibles) ---- */
.sl-form { display: flex; flex-direction: column; gap: var(--dv-px-6); min-width: 0; }
.sl-etiquette { margin-top: var(--dv-px-6); padding: 0; font-size: var(--dv-pt-13); font-weight: var(--dv-graisse-600); color: var(--texte-doux); }
.sl-texte { min-height: calc(var(--m-cible) * 2); padding: var(--dv-px-10) var(--dv-px-12); resize: vertical; }
.sl-voies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dv-px-8); margin: 0; padding: 0; border: 0; min-width: 0; }
.sl-voies legend { grid-column: 1 / -1; }
.sl-voie { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--dv-px-8);
  min-height: var(--m-bouton); padding: 0 var(--dv-px-12); border: 1px solid var(--bordure-forte); border-radius: var(--dv-px-999);
  background: var(--fond); color: var(--texte); font-weight: var(--dv-graisse-600); cursor: pointer; }
.sl-voie__case { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl-voie:has(.sl-voie__case:checked) { background: var(--primaire); border-color: var(--primaire); color: var(--texte-inverse); }
.sl-voie:has(.sl-voie__case:focus-visible) { outline: var(--dv-px-2) solid var(--primaire-fonce); outline-offset: var(--dv-px-2); }
.sl-voie span { min-width: 0; overflow-wrap: anywhere; }
.sl-plus { min-width: 0; }
.sl-plus__titre { display: flex; align-items: center; gap: var(--dv-px-6); min-height: var(--m-cible); font-weight: var(--dv-graisse-600);
  color: var(--lien); cursor: pointer; list-style: none; }
.sl-plus__titre::-webkit-details-marker { display: none; }
.sl-form .btn { margin-top: var(--dv-px-12); }
.sl-refus { display: flex; align-items: flex-start; gap: var(--dv-px-8); margin: 0; border-color: var(--alerte-texte); color: var(--alerte-texte); overflow-wrap: anywhere; }
.sl-refus .ic { flex: none; }
.sl-refus span { min-width: 0; }

/* ---- E2 : moi ---- */
.sl-trois { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--dv-px-8); text-align: center; }
.sl-trois > div { display: flex; flex-direction: column; }
.sl-gros { font-size: var(--dv-pt-22); font-weight: var(--dv-graisse-700); font-variant-numeric: tabular-nums; }
.sl-avis { gap: 0; padding-top: var(--dv-px-2); padding-bottom: var(--dv-px-2); }
.sl-inter { display: flex; align-items: center; gap: var(--dv-px-10); width: 100%; min-height: var(--m-cible); padding: 0;
  border: 0; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.sl-avis li + li .sl-inter { border-top: 1px solid var(--bordure-fine); }
.sl-inter > span:not(.sl-inter__piste) { flex: 1; min-width: 0; }
.sl-inter__piste { position: relative; width: calc(var(--dv-px-20) * 2); height: var(--dv-px-24);
  flex: none; border-radius: var(--dv-px-999); background: var(--fond-inactif); border: 1px solid var(--bordure-forte); }
.sl-inter__piste::after { content: ""; position: absolute; top: var(--dv-px-2); left: var(--dv-px-2); width: var(--dv-px-16);
  height: var(--dv-px-16); border-radius: var(--dv-px-999); background: var(--fond); border: 1px solid var(--bordure-forte); }
.sl-inter[aria-checked="true"] .sl-inter__piste { background: var(--succes); border-color: var(--succes); }
.sl-inter[aria-checked="true"] .sl-inter__piste::after { left: auto; right: var(--dv-px-2); }
.sl-inter[aria-busy="true"] { opacity: 0.6; }
.sl-interac-form { flex-direction: column; align-items: stretch; }
.sl-champ { min-height: var(--m-cible); width: 100%; padding: 0 var(--dv-px-12); border: 1px solid var(--bordure-forte);
  border-radius: var(--dv-px-8); background: var(--fond); color: var(--texte); font: inherit; font-size: var(--dv-pt-16); }

/* ---- le bloc d'accueil du resume ---- */
.sl-resume { min-height: var(--m-cible); }
.sl-resume__montant { font-size: var(--dv-pt-22); }