/* Wishlist — ce qui est propre à cette app. Tout le reste vient d'etabli.css.
   N'ajouter ici que ce que le socle ne fournit pas : si une règle pourrait
   servir à une autre app, elle remonte à Établi.

   L'accent est vérifié dans les deux thèmes :
   python3 lib/etabli/css/verifier_contrastes.py "#2f6f4f" "#ffffff" "#7fd0a4" "#08301c"
*/

/* --- L'accent, la seule chose qu'Établi n'impose jamais ------------------- */
:root {
  --accent: #2f6f4f;
  --accent-tx: #ffffff;
  --accent-soft: #e6f1ea;
  --accent-line: #bcd9c8;
  --ring: rgba(47, 111, 79, .30);
}

/* Trois mécanismes, comme dans etabli.css : le thème de l'OS par défaut, un
   data-theme="dark" forcé, et data-theme="light" qui gagne contre l'OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #7fd0a4;
    --accent-tx: #08301c;
    --accent-soft: #14291d;
    --accent-line: #23492f;
    --ring: rgba(127, 208, 164, .30);
  }
}
:root[data-theme="dark"] {
  --accent: #7fd0a4;
  --accent-tx: #08301c;
  --accent-soft: #14291d;
  --accent-line: #23492f;
  --ring: rgba(127, 208, 164, .30);
}

/* --- Bandeau aligné sur le contenu ---------------------------------------- */
/* Établi borne le bandeau à --lg-large (1240px), pour les apps à grilles et
   tableaux. Wishlist est une app de lecture linéaire bornée à --lg-lecture :
   sans cette règle, la marque flotte seule à gauche pendant que le contenu
   commence 280px plus loin. */
.bandeau .dedans { max-width: var(--lg-lecture); }

/* --- Rythme vertical ------------------------------------------------------ */
/* `.pile` empile en gardant un écart constant : c'est ce qui manque le plus
   souvent quand un formulaire a l'air « tassé ». */
.pile { display: flex; flex-direction: column; gap: var(--e-3); }

main.contenu > * + * { margin-top: var(--e-4); }
main.contenu > h1 + p { margin-top: var(--e-1); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.duo-aligne { display: flex; gap: var(--e-3); align-items: flex-end; }
.duo-aligne .champ { flex: 1; }
@media (max-width: 640px) {
  .duo { grid-template-columns: 1fr; }
  .duo-aligne { flex-direction: column; align-items: stretch; }
}

.apres-carte { margin-top: var(--e-5); }

/* --- Page de connexion ---------------------------------------------------- */
/* Remontée du centre plutôt que centrée : un bloc parfaitement centré
   verticalement paraît trop bas. */
.accueil-connexion {
  max-width: 22rem;
  padding-top: max(10vh, var(--e-7));
  display: flex; flex-direction: column; gap: var(--e-4);
}
.accueil-connexion h1 { font-size: 2rem; }

/* --- Repli de formulaire -------------------------------------------------- */
/* <details> natif : pas une ligne de JavaScript pour ouvrir et fermer.
   `display:flex` sur un <summary> supprime son marqueur natif — d'où le
   chevron dessiné à la main ci-dessous. Sans lui, le bloc replié ressemble à
   une boîte vide et rien ne dit qu'il s'ouvre. */
details > summary {
  cursor: pointer;
  min-height: 44px;              /* cible tactile, même au clavier-souris */
  display: flex; align-items: center; gap: var(--e-2);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "";
  width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid var(--tx-3);
  border-bottom: 2px solid var(--tx-3);
  transform: rotate(-45deg);
  transition: transform var(--t);
}
details[open] > summary::before { transform: rotate(45deg); }

details.carte > summary { font-weight: 640; }
details.carte:not([open]) { padding: var(--e-2) var(--e-4); }
details.carte[open] > summary { margin-bottom: var(--e-3); }
details:not(.carte) > summary { color: var(--tx-2); font-size: .9rem; }

/* --- Filtres -------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puce {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--e-3);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--tx-2); font-size: .9rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.puce:hover { background: var(--surface-2); color: var(--tx); }
.puce.actif {
  background: var(--accent-soft); color: var(--tx);
  border-color: var(--accent-line); font-weight: 600;
}

/* --- Liste d'envies ------------------------------------------------------- */
.items > li { display: flex; gap: var(--e-3); align-items: flex-start; }
.items .corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.items .ligne-titre { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.items .meta { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.item.reserve { opacity: .55; }

.vignette {
  width: 64px; height: 64px; flex: none;
  object-fit: cover; border-radius: var(--r-m);
  background: var(--surface-2);
}
/* Réserve la place pour aligner les titres quand une PARTIE des items a une
   image. Sans fond ni bordure : six carrés pointillés pour rien, c'est du
   bruit. La colonne disparaît entièrement quand aucun item n'a d'image —
   voir la condition dans le gabarit. */
.vide-visuel { background: none; }

.items .description {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Les étoiles portent l'information ; la couleur ne fait que la rendre
   repérable au balayage. Le nombre d'étoiles reste lisible sans elle. */
.etoiles { color: var(--accent); letter-spacing: .06em; font-size: .9rem; }

.visuel-fiche {
  max-width: 240px; border-radius: var(--r-l); border: 1px solid var(--line);
}

/* --- État vide ------------------------------------------------------------ */
.vide {
  padding: var(--e-6) var(--e-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-l);
  text-align: center;
}
.vide p + p { margin-top: var(--e-1); }

/* --- Cases à cocher ------------------------------------------------------- */
/* Le <label> couvre toute la ligne : sur téléphone, viser une case de 18px
   au doigt est perdu d'avance. */
.case {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 44px; cursor: pointer;
}
.case input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; accent-color: var(--accent);
}

.selection {
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--e-3); max-height: 18rem; overflow-y: auto;
}
.selection legend { padding: 0 var(--e-2); font-size: .85rem; color: var(--tx-2); }

/* --- Partages ------------------------------------------------------------- */
.entete-partage { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.entete-partage h2 { margin-right: auto; }
.partage.revoque { opacity: .6; }
.ligne-jeton {
  display: flex; align-items: center; gap: var(--e-3); justify-content: space-between;
}

/* --- Page publique -------------------------------------------------------- */
/* Un seul champ prénom pour toute la liste : il est collant, pour rester
   visible quand le visiteur descend et clique « Je le prends » plus bas. */
.prenom-unique {
  position: sticky; top: var(--e-3); z-index: 20;
  background: var(--bg);
  padding: var(--e-3) 0;
}
.prenom-unique input { max-width: 20rem; }
.items .action { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* --- Séparateur « ou » de la page de connexion ---------------------------- */
.separateur {
  display: flex; align-items: center; gap: var(--e-3);
  color: var(--tx-3); font-size: .85rem;
}
.separateur::before, .separateur::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}