/* ─── MES LISTES — l'écran refait le 26/09 sur la maquette validée ────
     La maquette de ChatGPT validée par Adam le 25/09 (foot2025/nimzou-site,
     docs/ui/2026-09-25-listes/) est l'AUTORITÉ de dessin : ce bloc la
     reprend règle par règle, préfixée `ls-`. Trois raccords, et eux
     seuls : ① les couleurs passent par les jetons (la maquette EST le
     thème « nuit », mêmes valeurs — les trois autres thèmes suivent sans
     rien recopier) ; ② les tailles de texte suivent l'échelle du produit
     (13 → 14, 15 → 16, les titres plafonnent à 24) ; ③ la fenêtre garde le
     socle commun (position, encoche) — seul son padding tombe, parce que
     les filets de la maquette vont d'un bord à l'autre.
     LA MISE EN PAGE SUIT LA LARGEUR DE LA FENÊTRE, PAS CELLE DE L'ÉCRAN
     (container query, comme la maquette) : au bureau la conversation
     reste à droite, et c'est la place laissée aux listes qui décide
     d'afficher le rail des listes à côté de la liste ouverte. */
  section#listes {
    padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
    container: ls / inline-size;
    color: var(--text);
    --ls-vert: color-mix(in srgb, var(--etat-bon) 55%, var(--text));
    --ls-rouge: color-mix(in srgb, var(--danger) 60%, var(--text));
    --ls-teinte: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  :where(#listes) button {
    font: inherit; color: inherit; background: none; border: 0; padding: 0;
    min-height: var(--cible); min-width: var(--cible); cursor: pointer;
  }
  :where(#listes) button:disabled { opacity: .45; cursor: default; }
  :where(#listes) button:hover:not(:disabled) { filter: brightness(1.12); }
  :where(#listes) h2, :where(#listes) p { margin: 0; }
  .ls-ic {
    width: 21px; height: 21px; flex: none; vertical-align: middle;
    fill: none; stroke: currentColor; stroke-width: 1.65;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* Les trois points « ⋯ » : au trait des autres pictogrammes ils ne
     faisaient qu'un pixel et demi, et c'est par eux qu'on gère une liste. */
  .ls-ic.ls-ic-points { stroke-width: 3.4; }
  /* PAS de taille sur `.ls-art` : chaque illustration porte SA taille en
     attribut, et une taille CSS ici battrait ces attributs (une propriété
     CSS l'emporte toujours sur un attribut de présentation SVG). Seuls
     les formats étroits, plus bas, les réduisent — exprès. */
  .ls-art { flex: none; display: block; }
  .ls-rangee { display: flex; align-items: center; gap: 10px; }
  .ls-muet { color: var(--muted); }
  .ls-petit { font-size: var(--t-corps); line-height: 1.5; color: var(--muted); }
  .ls-kicker {
    text-transform: uppercase; letter-spacing: .12em;
    font-size: var(--t-etiquette); font-weight: 600; color: var(--muted);
  }
  .ls-primaire {
    background: var(--accent); color: var(--on-accent); font-weight: 600;
    border-radius: var(--r-objet); padding: 10px 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .ls-secondaire {
    border: 1px solid var(--line2); border-radius: var(--r-objet); padding: 10px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .ls-discret { border-radius: var(--r-objet); color: var(--muted); padding: 8px 10px; }
  .ls-discret:hover { background: var(--panel2); color: var(--text); }
  .ls-icone {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-objet); flex: none;
  }
  .ls-danger { color: var(--ls-rouge); }
  .ls-danger-plein {
    background: color-mix(in srgb, var(--danger) 22%, var(--panel));
    color: color-mix(in srgb, var(--danger) 30%, var(--text));
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--panel));
    border-radius: var(--r-objet); padding: 10px 16px;
  }

  /* La barre du haut : le lieu (seulement s'il y a un choix de lieu —
     règle Q4b), la phrase du sanctuaire, et le ✕ qui rend la conversation. */
  .ls-barre {
    height: 68px; flex: none; padding: 0 22px 0 30px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .ls-lieu { display: flex; align-items: center; gap: 9px; font-size: var(--t-corps); min-width: 0; }
  .ls-lieu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ls-prive {
    color: var(--muted); font-size: var(--t-note);
    display: flex; align-items: center; gap: 6px; margin-left: auto;
  }
  .ls-prive .ls-ic { width: 17px; height: 17px; }

  /* ① L'ENSEMBLE — des cartes illustrées. */
  .ls-main {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .ls-accueil { max-width: 1100px; padding: 36px; margin: auto; }
  .ls-bienvenue { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
  .ls-bienvenue h2 {
    margin-top: 10px; font-size: var(--t-question); line-height: 1.14;
    letter-spacing: -.04em; font-weight: 600;
  }
  .ls-bienvenue p { color: var(--muted); margin-top: 10px; line-height: 1.6; }
  .ls-bienvenue .ls-primaire { margin-left: auto; white-space: nowrap; }
  .ls-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ls-carte {
    position: relative; min-width: 0; min-height: 202px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px; text-align: left;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-cadre);
    transition: border-color .2s, transform .2s;
  }
  .ls-carte:hover { border-color: var(--line2); transform: translateY(-2px); }
  .ls-carte-haut { display: flex; align-items: center; justify-content: space-between; }
  .ls-artbox {
    width: 58px; height: 58px; flex: none; border-radius: var(--r-objet);
    display: flex; align-items: center; justify-content: center;
    background: var(--ls-teinte);
  }
  .ls-t-libre   { --ls-teinte: color-mix(in srgb, var(--accent) 8%, transparent); }
  .ls-t-courses { --ls-teinte: color-mix(in srgb, var(--c-vert) 8%, transparent); }
  .ls-t-taches  { --ls-teinte: color-mix(in srgb, var(--c-ambre) 8%, transparent); }
  .ls-t-idees   { --ls-teinte: color-mix(in srgb, var(--c-violet) 8%, transparent); }
  .ls-carte-type { color: var(--muted); font-size: var(--t-etiquette); letter-spacing: .03em; }
  .ls-carte-nom {
    display: block; font-size: var(--t-lu); font-weight: 600; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .ls-apercu {
    color: var(--muted); font-size: var(--t-corps); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ls-carte-fleche {
    position: absolute; right: 15px; bottom: 13px;
    color: color-mix(in srgb, var(--muted) 62%, var(--bg));
  }
  /* LE « ⋯ » D'UNE CARTE (26/09) : à la place de la flèche, au même
     endroit — gérer une liste sans l'ouvrir. Un cadre porte la carte et
     son menu côte à côte (un bouton ne se met pas dans un bouton) ; le
     survol du cadre soulève les deux ensemble. */
  .ls-carte-cadre { position: relative; min-width: 0; display: grid; }
  .ls-carte-cadre:hover > .ls-carte { border-color: var(--line2); transform: translateY(-2px); }
  .ls-carte-menu {
    position: absolute; right: 4px; bottom: 2px;
    color: var(--muted); transition: transform .2s;
  }
  .ls-carte-menu:hover { background: var(--panel2); color: var(--text); }
  .ls-carte-cadre:hover > .ls-carte-menu { transform: translateY(-2px); }
  .ls-pied-accueil {
    display: flex; align-items: center; gap: 8px; margin-top: 24px;
    color: var(--muted); font-size: var(--t-note); line-height: 1.6;
  }
  .ls-pied-accueil .ls-ic { width: 17px; height: 17px; }
  .ls-erreur-accueil { color: var(--ls-rouge); line-height: 1.6; margin-bottom: 16px; }
  /* LES EXEMPLES (Adam, 26/09 : « l'idée est de proposer déjà des
     exemples, c'est pour cela que j'ai validé la maquette ») : la même
     carte, en pointillés — pas encore une liste de la personne, une liste
     à prendre. */
  .ls-exemples { margin-top: 32px; }
  .ls-exemples .ls-kicker { display: block; }
  .ls-exemples-texte { color: var(--muted); font-size: var(--t-corps); line-height: 1.6; margin: 8px 0 16px; }
  .ls-carte.ls-exemple {
    border-style: dashed; border-color: var(--line2);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
  }
  .ls-carte.ls-exemple:hover { border-color: var(--accent); }
  .ls-accueil-exemples { padding-top: 0; }
  /* La liste défile DANS la feuille : « Ajouter cette liste » reste
     visible sans chercher, même pour les onze courses de l'exemple. */
  .ls-exemple-liste {
    margin: -8px 0 4px; max-height: min(42vh, 330px); overflow: auto;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .ls-exemple-el {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 53%, transparent);
  }
  .ls-exemple-el .ls-el-corps { padding: 6px 0; }

  /* Le premier jour : aucune liste — l'invitation, puis les exemples
     dessous (d'où une hauteur libre, et non plus tout l'écran). */
  .ls-vide {
    padding: 42px 24px 8px; gap: 17px; text-align: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .ls-vide-illu { position: relative; width: 200px; height: 160px; display: grid; place-items: center; }
  .ls-vide-papier {
    position: absolute; left: 40px; top: 12px; width: 112px; height: 128px;
    display: flex; flex-direction: column; gap: 14px; padding: 27px 15px;
    background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-cadre);
    transform: rotate(-10deg);
  }
  .ls-vide-papier::before, .ls-vide-papier::after {
    content: ""; height: 9px; width: 72px; border-radius: var(--r-plein); background: var(--line2);
  }
  .ls-vide-papier::after { width: 50px; }
  .ls-vide-illu .ls-art { position: absolute; right: 18px; bottom: 7px; transform: rotate(9deg); }
  .ls-vide h2 { font-size: var(--t-question); line-height: 1.14; letter-spacing: -.04em; font-weight: 600; }
  .ls-vide p { max-width: 335px; line-height: 1.75; color: var(--muted); }
  .ls-vide .ls-petit { max-width: 320px; margin-top: 8px; }
  .ls-graines { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 2px 0 8px; }
  .ls-graines button {
    padding: 8px 13px; border: 1px solid var(--line2); border-radius: var(--r-plein);
    font-size: var(--t-corps); color: var(--muted);
  }

  /* ② LA LISTE OUVERTE — le rail des listes à gauche (quand la place le
     permet), la liste à droite, la saisie collée en bas. */
  .ls-cadre { flex: 1; min-height: 0; display: flex; }
  .ls-rail {
    width: 245px; flex: none; padding: 18px 12px; overflow: auto;
    border-right: 1px solid var(--line); scrollbar-width: thin;
  }
  .ls-rail-titre { font-size: var(--t-note); color: var(--muted); padding: 12px; }
  .ls-rail-liste { display: grid; gap: 5px; }
  .ls-rail-liste button {
    display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left;
    border-radius: var(--r-objet); font-size: var(--t-corps); line-height: 1.4;
  }
  .ls-rail-liste button span { overflow-wrap: anywhere; }
  .ls-rail-liste button:hover { background: var(--panel); }
  .ls-rail-liste button[aria-current="page"] { background: var(--panel2); }
  .ls-rail-liste .ls-art { width: 29px; height: 29px; }
  .ls-detail { min-width: 0; flex: 1; display: flex; flex-direction: column; position: relative; }
  .ls-detail-tete { padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
  .ls-retour { display: none; margin-left: -8px; margin-bottom: 8px; }
  .ls-titre-ligne { display: flex; align-items: center; gap: 14px; }
  .ls-titre-ligne h2 {
    font-size: var(--t-question); line-height: 1.2; letter-spacing: -.04em; font-weight: 600;
    overflow-wrap: anywhere;
  }
  .ls-titre-ligne .ls-petit { margin-top: 5px; }
  /* « Options » DIT son nom (26/09) : les trois points seuls, sans
     bordure, ne se voyaient pas — Adam a cherché la suppression d'une
     liste sans la trouver. Au téléphone, le mot tombe, la bordure reste. */
  .ls-titre-ligne .ls-options {
    margin-left: auto; align-self: flex-start; flex: none;
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px;
    border: 1px solid var(--line2); border-radius: var(--r-plein); font-size: var(--t-note);
  }
  .ls-titre-ligne .ls-options:hover { background: var(--panel2); }
  .ls-outils { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
  .ls-outils button {
    display: flex; align-items: center; gap: 7px; padding: 8px 12px;
    font-size: var(--t-note); border: 1px solid var(--line); border-radius: var(--r-plein);
  }
  .ls-outils button[aria-pressed="true"] { background: var(--panel2); border-color: var(--line2); }
  .ls-defile {
    flex: 1; min-height: 0; overflow: auto; padding: 6px 26px 18px; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .ls-groupe {
    display: flex; align-items: center; gap: 8px; padding: 21px 7px 9px;
    color: var(--muted); font-size: var(--t-note);
  }
  .ls-el {
    display: flex; align-items: center; gap: 10px; min-height: 68px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 53%, transparent);
    border-radius: var(--r-fin); animation: ls-arrive .18s ease;
  }
  .ls-coche { display: flex; align-items: center; justify-content: center; flex: none; }
  .ls-case {
    width: 23px; height: 23px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid color-mix(in srgb, var(--muted) 65%, var(--panel));
    border-radius: var(--r-fin); color: var(--on-accent);
  }
  .ls-el.fait .ls-case { background: var(--ls-vert); border-color: var(--ls-vert); }
  .ls-el.fait .ls-case .ls-ic { width: 16px; height: 16px; stroke-width: 2.3; }
  .ls-el-corps { flex: 1; min-width: 0; padding: 12px 0; line-height: 1.45; }
  .ls-el-texte { font-size: var(--t-lu); overflow-wrap: anywhere; }
  .ls-el-detail { font-size: var(--t-note); color: var(--muted); margin-top: 2px; }
  /* Pleinement visible (26/09) : c'est par lui qu'on retire un élément. */
  .ls-el-menu { color: var(--muted); }
  .ls-el-menu:hover { background: var(--panel2); color: var(--text); }
  .ls-el.fait .ls-el-texte {
    color: var(--muted); text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--muted) 60%, var(--bg));
  }
  .ls-el.fait .ls-art { opacity: .48; filter: saturate(.4); }
  .ls-el.arrive { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  @keyframes ls-arrive { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  .ls-faits-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 19px 0 2px; }
  .ls-faits-tete button { font-size: var(--t-corps); color: var(--muted); }
  .ls-faits-bascule { display: flex; align-items: center; gap: 6px; padding-left: 7px; }
  .ls-faits-tete .ls-decocher { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .ls-faits-tete .ls-decocher, .ls-faits-tete .ls-vider { font-size: var(--t-note); }
  .ls-decocher .ls-ic { width: 17px; height: 17px; }
  .ls-fini { display: flex; align-items: center; gap: 13px; padding: 22px 12px; color: var(--ls-vert); line-height: 1.5; }
  .ls-fini strong { font-size: var(--t-lu); }
  .ls-fini p { color: var(--muted); font-size: var(--t-corps); margin-top: 4px; }
  .ls-composeur { flex: none; padding: 14px 26px 16px; border-top: 1px solid var(--line); background: var(--bg); }
  .ls-suggestions { display: flex; gap: 7px; overflow: auto; padding-bottom: 9px; scrollbar-width: none; }
  .ls-suggestions button {
    display: flex; align-items: center; gap: 5px; padding: 6px 12px; white-space: nowrap;
    border: 1px solid var(--line); border-radius: var(--r-plein); font-size: var(--t-note);
  }
  .ls-ajout {
    display: flex; align-items: center; gap: 8px; padding: 5px;
    background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-cadre);
  }
  .ls-ajout:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
  }
  .ls-ajout input {
    flex: 1; min-width: 0; padding: 10px 9px; border: 0; outline: none; box-shadow: none;
    background: none; color: var(--text); font-family: inherit; font-size: 16px;
  }
  .ls-ajout input::placeholder { color: var(--muted); }
  .ls-ajout .ls-primaire { min-width: var(--cible); padding: 8px; border-radius: var(--r-objet); }
  .ls-aide { font-size: var(--t-etiquette); color: var(--muted); margin: 8px 2px 0; line-height: 1.45; }
  .ls-erreur { font-size: var(--t-corps); color: var(--ls-rouge); padding: 8px 4px 0; line-height: 1.5; }

  /* Les feuilles — créer, modifier, renommer, confirmer — DANS la fenêtre :
     aucune boîte native (alert, confirm, prompt ne s'affichent pas en PWA
     installée, payé par Adam le 06/09). */
  .ls-voile {
    position: absolute; inset: 0; z-index: 30; padding: 24px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--veil) 72%, transparent); backdrop-filter: blur(3px);
  }
  .ls-feuille {
    width: 100%; max-width: 470px; max-height: 100%; overflow: auto; padding: 24px;
    background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-cadre);
    box-shadow: 0 24px 80px color-mix(in srgb, var(--shadow) 33%, transparent); scrollbar-width: thin;
  }
  .ls-feuille-tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .ls-feuille-tete h2 {
    flex: 1; padding-top: 6px; font-size: var(--t-question); line-height: 1.2;
    letter-spacing: -.04em; font-weight: 600;
  }
  .ls-feuille-tete .ls-icone { margin: -4px -8px 0 0; color: var(--muted); }
  .ls-feuille-texte { font-size: var(--t-corps); line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
  .ls-champ-bloc { display: block; margin: 15px 0; }
  .ls-label { display: block; font-size: var(--t-corps); margin-bottom: 8px; }
  .ls-champ-bloc input {
    width: 100%; min-height: var(--cible); padding: 10px 12px;
    background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet);
    font-family: inherit; font-size: 16px;
  }
  .ls-champ-bloc input::placeholder { color: var(--muted); }
  .ls-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 22px; }
  .ls-actions .ls-primaire { flex: 1; }
  .ls-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ls-types button {
    display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left;
    border: 1px solid var(--line2); border-radius: var(--r-objet); font-size: var(--t-corps);
  }
  .ls-types button[aria-pressed="true"] {
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .ls-menu-actions { display: grid; gap: 8px; }
  /* Un bouton ou un lien (« Imprimer » ouvre la feuille dans un onglet) :
     la même rangée. */
  .ls-menu-actions > button, .ls-menu-actions > a {
    display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left;
    min-height: var(--cible); border: 1px solid var(--line); border-radius: var(--r-objet);
  }
  .ls-menu-actions > a { color: inherit; text-decoration: none; }
  .ls-menu-actions > a:hover { background: var(--panel2); }
  .ls-valeur { margin-left: auto; color: var(--muted); font-size: var(--t-note); }
  .ls-retirer { width: 100%; justify-content: center; margin-top: 18px; }

  /* Les annulations : 15 s, suspendues au survol et au focus. */
  .ls-toasts {
    position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 35;
    width: min(440px, calc(100% - 32px));
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  .ls-toast {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 17px;
    font-size: var(--t-corps); line-height: 1.4; pointer-events: auto;
    background: color-mix(in srgb, var(--panel2) 92%, var(--text));
    border: 1px solid color-mix(in srgb, var(--line2) 80%, var(--text));
    border-radius: var(--r-objet);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow) 40%, transparent);
  }
  .ls-toast span { flex: 1; }
  .ls-toast .ls-annuler {
    padding: 8px; font-weight: 600; white-space: nowrap;
    color: color-mix(in srgb, var(--accent) 45%, var(--text));
  }
  .ls-toast .ls-icone { color: var(--muted); }

  /* LES DEUX SEUILS DE LA MAQUETTE, rapportés à la place des listes : la
     maquette décide sur la largeur de son appareil, barre de navigation
     comprise (164 px) ; ici le rail du produit est déjà dehors, donc les
     seuils se lisent sans lui — 1100 → 940, et le rail des listes tient
     tant qu'il reste 600 px. */
  @container ls (max-width: 940px) {
    .ls-rail { width: 205px; }
    .ls-accueil { padding: 28px; }
    .ls-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-carte { min-height: 190px; }
    .ls-detail-tete { padding: 20px; }
    .ls-defile { padding-left: 16px; padding-right: 16px; }
    .ls-composeur { padding-left: 20px; padding-right: 20px; }
  }
  @container ls (max-width: 599px) {
    .ls-barre { height: 62px; padding: 0 9px 0 17px; }
    .ls-prive span { display: none; }
    .ls-accueil { padding: 25px 18px; }
    .ls-bienvenue { align-items: flex-start; gap: 10px; margin-bottom: 24px; }
    .ls-bienvenue p { font-size: var(--t-note); max-width: 220px; margin-top: 8px; }
    .ls-bienvenue .ls-primaire { padding: 10px; min-width: 46px; }
    .ls-bienvenue .ls-primaire span { display: none; }
    .ls-grille { gap: 12px; }
    .ls-carte { padding: 15px; min-height: 194px; gap: 12px; }
    .ls-carte-haut { align-items: flex-start; }
    .ls-artbox { width: 49px; height: 49px; }
    .ls-artbox .ls-art { width: 39px; height: 39px; }
    .ls-carte-type { max-width: 60px; text-align: right; padding-top: 5px; }
    .ls-apercu { font-size: var(--t-note); line-height: 1.6; }
    .ls-pied-accueil { margin-top: 20px; align-items: flex-start; font-size: var(--t-etiquette); }
    .ls-rail { display: none; }
    .ls-retour { display: inline-flex; }
    .ls-detail-tete { padding: 10px 18px 13px; }
    .ls-titre-ligne { gap: 10px; }
    .ls-titre-ligne .ls-artbox { width: 48px; height: 48px; }
    .ls-titre-ligne .ls-petit { font-size: var(--t-note); }
    .ls-titre-ligne .ls-options { padding: 8px; }
    .ls-options span, .ls-decocher .ls-ic { display: none; }
    .ls-outils { margin-top: 11px; }
    .ls-defile { padding: 0 11px 15px; }
    .ls-groupe { padding-left: 8px; }
    .ls-el { gap: 6px; min-height: 66px; }
    .ls-el > .ls-art { width: 34px; height: 34px; }
    .ls-el-texte { font-size: var(--t-corps); }
    .ls-el-corps { padding: 10px 0; }
    .ls-composeur { padding: 10px 14px 14px; }
    .ls-voile { align-items: flex-end; padding: 0; }
    .ls-feuille {
      max-width: none; max-height: 94%; padding: 22px 20px;
      padding-bottom: max(22px, var(--safe-b));
      border-radius: var(--r-cadre) var(--r-cadre) 0 0;
    }
    .ls-vide { padding: 28px 21px; }
    .ls-vide-illu { height: 147px; }
    .ls-toasts { bottom: 99px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ls-el { animation: none; }
    .ls-carte, .ls-carte-menu { transition: none; }
  }
  /* Chaque classe qui pose un display ET peut porter `hidden` déclare son
     [hidden] (règle du 29/08, gardée par test_hidden.js) : sans elle, la
     règle d'auteur bat celle du navigateur et `hidden` ne cache rien. */
  .ls-lieu[hidden], .ls-cadre[hidden], .ls-outils[hidden],
  .ls-suggestions[hidden], .ls-voile[hidden] { display: none; }