/* ============================================================
   swap-iit — app.css
   Briques de l'espace connecté (hub, listes, nav basse).
   Chargé UNIQUEMENT sur les pages connectées, EN PLUS de base.css
   (les pages publiques restent sur base.css seul, pour la perf).

   Source de vérité : _private/maquettes/Espace personnel.pdf
   (artboard 393x777, Illustrator). Toutes les valeurs ci-dessous
   sont RELEVÉES dans le PDF vectoriel, pas estimées.
   Couleurs et fontes : _private/charte/Charte Graphique 2026.pdf.
   ============================================================ */

:root{
  --app-maxw:480px;      /* colonne app centrée au-delà du mobile */
  --app-pad:24px;        /* relevé : titres à x=24 */
  --app-gutter:6px;      /* relevé : cartes à x=30,7 → 6 px de plus que les titres */
  --card-r:16px;         /* relevé : 16,34 px */
  --row-h:70px;          /* relevé : 69,9 px */
  --nav-h:43px;          /* relevé : 42,7 px */
  --fab:35px;            /* relevé : 34,9 px */

  /* Rayures. Trois relevés au pixel sur trois blocs de largeurs différentes :
       bandeau app     393   → période 82    → 4,79 périodes
       bloc de série   332,5 → période 69,6  → 4,78 périodes
       carte membre    152,1 → période 31,7  → 4,80 périodes
     Léna ne dessine donc pas une période fixe : elle en met toujours ~4,8 dans
     la largeur du bloc. D'où une définition proportionnelle unique, qui vaut à
     toutes les échelles au lieu d'une variable par taille de bloc.
     Le crème occupe deux tiers de la période : « la partie bleue doit toujours
     être plus fine que la partie beige » (charte). */
  --stripes-app:repeating-linear-gradient(90deg,var(--creme) 0 13.9%,var(--vert) 13.9% 20.83%);
  --stripes-block:var(--stripes-app);

  /* Échelle typo.
     Relevé maquette (artboard 393) : 18 / 16 / 15 / 14 / 12 / 11 / 10 / 6.
     Remontée d'un facteur ~1,35 : le corps de la maquette (12 px) passe sous le
     seuil WCAG AA et sous les standards mobiles, et le label de nav (6 px) est
     illisible. Les proportions entre niveaux sont conservées.
     Validé par Luc le 29/08/2026. */
  --fs-h1:24px; --fs-h2:20px; --fs-name:18px; --fs-row:17px;
  --fs-body:15px; --fs-btn:14px; --fs-tile:12px; --fs-nav:11px;
  --fs-tile-n:24px;      /* chiffre des tuiles stats */
}

/* ---------- Conteneur ---------- */
.app{max-width:var(--app-maxw);margin-inline:auto;padding:16px 0 48px}
.app > * + *{margin-top:24px}

/* ---------- Titres ---------- */
.app-h1,.app-h2{padding-inline:var(--app-pad);margin:0}
.app-h1{font-size:var(--fs-h1)}
.app-h2{font-size:var(--fs-h2)}
.app-h1 .bell,.app-h2 .bell{font-weight:400}

/* Titre + illustration à droite (mascottes de Léna) */
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-inline:var(--app-pad)}
.app-head .app-h1{padding-inline:0}
.app-head img{width:56px;height:auto;flex:none;margin-top:-6px}

/* ---------- Bandeau rayé pleine largeur ---------- */
.band{background:var(--stripes-app);border-radius:var(--card-r);
  min-height:92px;display:flex;align-items:center;gap:14px;
  padding:0 var(--app-pad);margin-inline:var(--app-gutter)}

/* ---------- Carte crème ---------- */
.card{background:var(--creme);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);padding:20px var(--app-pad)}

/* ---------- Avatar initiale ---------- */
.avatar{width:50px;height:50px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--rose);color:var(--blanc);
  font-weight:700;font-size:20px;line-height:1;text-transform:uppercase}
.avatar.jaune-bg{background:var(--jaune);color:var(--anthracite)}

/* ---------- Identité (nom + méta) ---------- */
.ident{min-width:0;flex:1}
.ident .name{font-size:var(--fs-name);font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident .meta{font-size:var(--fs-body);color:var(--anthracite);margin-top:2px}
.ident .meta .star{font-size:11px}

/* ---------- Bouton pilule ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Schoolbell',cursive;font-weight:400;font-size:var(--fs-btn);
  color:var(--blanc);background:var(--rose);border:0;border-radius:999px;
  padding:5px 16px;text-decoration:none;cursor:pointer;white-space:nowrap}
.pill.jaune-bg{background:var(--jaune);color:var(--anthracite)}
.pill:hover{filter:brightness(1.06)}

/* Lien texte manuscrit (« Modifier ») */
.link-bell{font-family:'Schoolbell',cursive;font-size:var(--fs-name);
  color:var(--rose);text-decoration:none;flex:none}
.link-bell:hover{text-decoration:underline}

/* ---------- Tuiles stats rayées ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;
  padding-inline:calc(var(--app-pad) + 28px)}
.tile{background:var(--stripes-app);border-radius:var(--card-r);
  min-height:70px;display:grid;place-content:center;text-align:center;
  padding:8px 4px;text-decoration:none;color:inherit}
.tile .n{display:block;font-size:var(--fs-tile-n);font-weight:700;line-height:1.1}
.tile .l{display:block;font-size:var(--fs-tile);line-height:1.2;margin-top:2px}

/* ---------- Liste à chevrons ---------- */
.linklist{background:var(--creme);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);overflow:hidden}
.linklist a{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:var(--row-h);padding:0 var(--app-pad);
  font-size:var(--fs-row);font-weight:700;text-decoration:none;color:inherit}
.linklist a + a{box-shadow:inset 0 1px 0 var(--vert)}
.linklist a:hover{background:var(--blanc)}
.linklist .bell{font-weight:400}
/* Pastille de comptage : rose, comme tout ce qui attend le membre. */
.pastille{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:8px;border-radius:999px;background:var(--rose);color:var(--blanc);
  font-size:12px;font-weight:700;line-height:1;vertical-align:middle}

/* Chevron : forme géométrique en CSS, aucun asset tiers (règle 3) */
.chev{width:9px;height:9px;flex:none;border-top:2px solid var(--rose);
  border-right:2px solid var(--rose);transform:rotate(45deg)}
.chev.jaune-br{border-color:var(--jaune)}

/* ---------- Mes échanges ----------
   Relevés sur Espace perso-23/24 (artboard 393) : onglets 105,1x41,7 avec
   6,9 de gouttière, avatar 41,3, badge d'état 89,3x20,6, pastille d'échange
   31,7 centrée, bouton d'action 160,7x24. */
.tabs{display:flex;gap:7px;padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.tab{flex:1;min-height:42px;display:grid;place-items:center;border-radius:999px;
  background:var(--creme);font-size:var(--fs-body);color:var(--anthracite);
  text-decoration:none;text-align:center;padding:4px 6px;line-height:1.15}
.tab[aria-current="page"]{background:var(--rose);color:var(--blanc);font-weight:700}
.tab .n{font-weight:700}
.tab:hover{filter:brightness(.98)}

.swapcard{background:var(--creme);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);overflow:hidden}
.swapcard .head{display:flex;align-items:center;gap:12px;padding:16px var(--app-pad) 0}
.swapcard .head .avatar{width:41px;height:41px;font-size:17px}
.swapcard .head .ident{flex:1;min-width:0}
.swapcard .head .ident .name{font-size:var(--fs-body)}
.swapcard .head .ident .meta{font-size:12px;margin-top:1px}

/* Badge d'état : rose quand la balle est dans mon camp, jaune quand j'attends
   l'autre. C'est la lecture des planches « Mes échanges » de Léna. */
.badge-state{flex:none;font-family:'Schoolbell',cursive;font-size:12px;line-height:1;
  min-height:21px;display:grid;place-items:center;padding:5px 13px;border-radius:999px;
  background:var(--rose);color:var(--blanc);text-align:center}
.badge-state.wait{background:var(--jaune);color:var(--anthracite)}

.swapcard .trade{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px var(--app-pad) 0}
.swapcard .trade .vig{width:58px;height:58px;background:var(--blanc);border-radius:12px;
  display:grid;place-items:center;overflow:hidden;flex:none}
.swapcard .trade .vig img{width:100%;height:100%;object-fit:contain}
.swapcard .trade .vig .ph{width:52%;height:auto;opacity:.25}
.swapcard .trade .sw{width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--rose);color:var(--blanc);font-size:15px}
.swapcard .trade .sw.wait{background:var(--jaune);color:var(--anthracite)}
.swapcard .names{display:flex;justify-content:center;gap:12px;padding:6px var(--app-pad) 0;
  font-size:11px;text-align:center}
.swapcard .names span{width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swapcard .names .sp{width:32px}
.swapcard .note{padding:10px var(--app-pad) 0;text-align:center;font-size:var(--fs-body)}

/* Pied rayé : c'est là que Léna pose l'action de la carte. */
.swapcard .foot{background:var(--stripes-app);margin-top:16px;padding:14px var(--app-pad);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.swapcard .foot form{margin:0;width:100%;display:flex;justify-content:center}
.swapcard .foot .act{font-family:'Schoolbell',cursive;font-weight:400;font-size:var(--fs-btn);
  min-height:34px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;text-decoration:none;
  background:var(--rose);color:var(--blanc)}
.swapcard .foot .act.jaune-bg{background:var(--jaune);color:var(--anthracite)}
.swapcard .foot .act[disabled]{opacity:.5;cursor:default}
.swapcard .foot .act.ghost{background:transparent;color:var(--anthracite);
  box-shadow:inset 0 0 0 1px var(--anthracite)}

/* ---------- Catalogue ----------
   Relevés sur Catalogue_recherche.jpg : barre de recherche 259,6x35 centrée,
   pills 78,7x19,7 (identiques à Ma collection), blocs de série 332,5x291,3
   alternant crème plein et rayé, nom de la série écrit verticalement à droite. */
.searchbar.center{width:min(300px,80%);margin-inline:auto}

.serieblock{position:relative;background:var(--creme);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);padding:18px 44px 18px var(--app-pad);overflow:hidden}
.serieblock.striped{background:var(--stripes-block)}
/* Nom de la série à la verticale, contre le bord droit du bloc. */
.serieblock .vlabel{position:absolute;top:18px;right:6px;bottom:18px;
  writing-mode:vertical-rl;display:flex;align-items:flex-end;
  font-family:'Schoolbell',cursive;font-size:26px;line-height:1;
  color:var(--rose);text-decoration:none;white-space:nowrap;overflow:hidden}
.serieblock.striped .vlabel{color:var(--jaune)}
.serieblock .vlabel:hover{text-decoration:underline}

/* Grille du catalogue : le nom est AU-DESSUS de la vignette blanche,
   contrairement aux cartes de Ma collection où il est dedans. */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ccard{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit}
.ccard .cn{font-size:11px;line-height:1.2;text-align:center;min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .cv{aspect-ratio:1;background:var(--blanc);border-radius:12px;
  display:grid;place-items:center;overflow:hidden}
.ccard .cv img{width:100%;height:100%;object-fit:contain}
.ccard .cv .ph{width:44%;height:auto;opacity:.25}
.ccard:hover .cv{filter:brightness(.97)}

/* ---------- Membres qui proposent une figurine (pleine page) ----------
   Relevés sur resultat_recherche.jpg : deux colonnes de cartes 152,1x118,5
   avec 28,4 de gouttière, avatars 30,7, bouton « On swap ? » 43,7x11.
   Les cartes alternent fond crème et fond rayé, comme les blocs de série. */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.mcard{background:var(--creme);border-radius:var(--card-r);padding:12px;
  display:flex;flex-direction:column;gap:8px}
.mcard.striped{background:var(--stripes-app)}
.mcard .who{display:flex;align-items:center;gap:9px}
.mcard .avatar{width:31px;height:31px;font-size:13px}
.mcard .who .ident .name{font-size:12px}
.mcard .who .ident .meta{font-size:11px;margin-top:1px}
.mcard .what{display:flex;align-items:flex-end;gap:8px;flex:1}
.mcard .what .txt{flex:1;min-width:0}
.mcard .what .b{display:block;font-size:12px;font-weight:700;line-height:1.2}
.mcard .what .s{display:block;font-size:11px;line-height:1.2}
.mcard .what .vig{width:52px;height:66px;flex:none;background:var(--blanc);
  border-radius:10px;display:grid;place-items:center;overflow:hidden}
.mcard .what .vig img{width:100%;height:100%;object-fit:contain}
.mcard .what .vig .ph{width:52%;height:auto;opacity:.25}
.mcard .pill{align-self:flex-start;font-size:12px;padding:4px 14px}

/* ---------- Fiche figurine ----------
   Relevés sur _private/maquettes/Fiche figurine-26.jpg : bandeau rayé de 334
   de haut, photo carrée de ~233 centrée, coeur de 34 en haut à droite,
   deux cartes de 87,8x70,1, avatars membres de 38,9, bouton « Échanger »
   de 60,5x19,2. Coche et coeur en caractères : ce sont des signes, pas des
   illustrations de Léna, et aucune librairie d'icônes n'entre ici (règle 3). */
.fig-hero{position:relative;background:var(--stripes-app);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);padding:14px 0 24px;text-align:center}
.fig-hero .shot{width:min(233px,62%);aspect-ratio:1;margin:14px auto 0;
  border-radius:20px;overflow:hidden;background:var(--blanc);display:grid;place-items:center}
.fig-hero .shot img{width:100%;height:100%;object-fit:cover}
.fig-hero .shot .ph{width:44%;height:auto;object-fit:contain;opacity:.3}
.heart{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;
  border-radius:50%;background:var(--rose);color:var(--blanc);font-size:16px;line-height:1;
  display:grid;place-items:center;cursor:pointer;text-decoration:none}
.heart[aria-pressed="true"]{background:var(--jaune);color:var(--anthracite)}
.heart:hover{filter:brightness(1.06)}

.fig-eyebrow{padding-inline:var(--app-pad);font-family:'Schoolbell',cursive;
  font-size:var(--fs-name);color:var(--rose)}
.fig-eyebrow a{color:inherit;text-decoration:none}
.fig-eyebrow a:hover{text-decoration:underline}
.fig-name{padding-inline:var(--app-pad);font-size:var(--fs-h1);margin:2px 0 0}

/* Les deux bascules « Je l'ai » / « Je cherche » */
/* Les deux cartes doivent rester strictement identiques : meme base flex pour
   la largeur, hauteur fixe pour la hauteur. Le compteur de doublons est en
   absolu, sinon il s'ajoute au flux et grandit « Je l'ai » tout seul. */
.dualcards{display:flex;justify-content:center;gap:12px;padding-inline:var(--app-pad)}
.dualcards form{flex:0 1 118px;display:flex;margin:0}
.dualcards button{flex:1;height:74px;position:relative;border:0;border-radius:var(--card-r);
  background:var(--creme);cursor:pointer;display:grid;place-content:center;justify-items:center;
  gap:5px;font:inherit;font-size:var(--fs-btn);line-height:1.15;white-space:nowrap;
  color:var(--anthracite);padding:8px 6px}
.dualcards button .ic{font-size:20px;line-height:1;color:var(--rose)}
.dualcards button[aria-pressed="true"]{background:var(--jaune)}
.dualcards button[aria-pressed="true"] .ic{color:var(--anthracite)}
.dualcards button:hover{filter:brightness(.98)}
.dualcards .count{position:absolute;top:7px;right:9px;font-size:11px;font-weight:700}

/* Membres qui proposent la figurine */
.memberlist{display:flex;flex-direction:column;gap:14px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.membercard{display:flex;align-items:center;gap:14px;background:var(--creme);
  border-radius:var(--card-r);padding:12px 16px;min-height:74px}
.membercard .avatar{width:39px;height:39px;font-size:16px}
.membercard .ident{flex:1;min-width:0}
.membercard .ident .name{font-size:var(--fs-body);font-weight:700}
.membercard .ident .meta{font-size:12px}
.more-link{display:block;text-align:center;font-size:var(--fs-body);
  color:var(--anthracite);text-decoration:underline}

/* ---------- Barre de titre avec retour (maquette p.3 et p.5 : « ‹ » rose) ---------- */
.app-topbar{display:flex;align-items:center;gap:12px;padding-inline:var(--app-pad)}
.app-topbar .app-h1{padding-inline:0}
.back{display:grid;place-items:center;width:28px;height:28px;flex:none;
  margin-left:-6px;text-decoration:none}
.back i{display:block;width:9px;height:9px;
  border-left:2px solid var(--rose);border-bottom:2px solid var(--rose);
  transform:rotate(45deg);margin-left:3px}
.back:hover i{border-color:var(--anthracite)}

/* ---------- Navigation basse + bouton d'ajout ----------
   Depuis le 30/08/2026, tous les écrans gardent l'en-tête et le pied de page :
   la barre basse flotte donc au-dessus du grand pied de page, qui reserve de
   la place pour ne pas passer dessous. */
body:has(.bottomnav) .foot{padding-bottom:96px}
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom));
  width:min(297px,calc(100% - 96px));height:var(--nav-h);
  background:var(--vert);border-radius:999px;
  display:flex;align-items:center;justify-content:space-around;
  padding:0 10px;z-index:40}
.bottomnav a{display:grid;justify-items:center;gap:2px;
  font-size:var(--fs-nav);line-height:1;text-decoration:none;color:var(--anthracite)}
.bottomnav a[aria-current="page"]{font-weight:700}
.bottomnav .ic{width:26px;height:26px;border-radius:50%;background:var(--blanc)}
.fab{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom) + var(--nav-h) - (var(--fab) / 2));
  transform:translateX(-50%);width:var(--fab);height:var(--fab);border-radius:50%;
  background:var(--rose);color:var(--blanc);display:grid;place-items:center;
  font-size:20px;line-height:1;text-decoration:none;z-index:41}
.fab:hover{filter:brightness(1.06)}

/* ---------- Catalogue et collection ----------
   Relevés sur _private/maquettes/Partie catalogue/ (JPG 819 px, artboard 393,
   mesures au pixel) : pills 78x19,7 gouttière 5,8 ; grille 3 colonnes de
   99,3x95 gouttière 16,4 ; bouton de carte 58,5x14,4 (planche « sélection
   des figurines ») ; pastilles de pagination 15,5 ; marge latérale 32.
   Les hauteurs porteuses de texte suivent la remontée typo (x1,35). */

/* En-tête de profil (avatar plus petit que sur le hub : 42,5 relevé) */
.profile-row{display:flex;align-items:center;gap:14px;padding-inline:var(--app-pad)}
.avatar.sm{width:43px;height:43px;font-size:17px}

/* Pills de filtre. Largeur fixe (78) dans la maquette : ici variable, sinon
   les noms longs (SkullPanda) débordent. */
.chips{display:flex;flex-wrap:wrap;gap:8px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.chip{display:inline-flex;align-items:center;justify-content:center;
  min-height:27px;padding:0 15px;border-radius:999px;background:var(--creme);
  font-family:'Schoolbell',cursive;font-size:var(--fs-btn);line-height:1;
  color:var(--anthracite);text-decoration:none;border:0;cursor:pointer}
.chip[aria-current="page"]{background:var(--rose);color:var(--blanc)}
.chip:hover{filter:brightness(.97)}

/* Grille de figurines */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.fcard{background:var(--creme);border-radius:var(--card-r);
  padding:10px 8px;display:flex;flex-direction:column;gap:6px;
  text-align:center;text-decoration:none;color:inherit}
.fcard .vis{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.fcard .vis img{width:100%;height:100%;object-fit:contain}
.fcard .vis .ph{width:34%;opacity:.22}
.fcard .vis img[data-full]{cursor:zoom-in}
/* Hauteurs figees : le nom sur une ligne, le libelle sur deux, pour que le
   bouton tombe au meme endroit sur toutes les cartes quelle que soit la
   longueur du texte. */
.fcard .fn{font-size:12px;font-weight:700;line-height:1.2;min-height:1.2em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard .fs{font-size:11px;line-height:1.2;min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard form{margin:auto 0 0}
.fcard > .mini{margin-top:auto}
/* Charte : le rose est reserve aux boutons d'action, le vert d'eau reste un
   appui discret (fonds, motifs, rayures) — jamais un fond de bouton.
   L'action a declencher est donc rose ; l'etat deja acquis reste discret. */
.fcard .mini{width:100%;font-family:'Schoolbell',cursive;font-weight:400;
  font-size:13px;line-height:1;min-height:22px;border:0;border-radius:999px;
  background:var(--rose);color:var(--blanc);cursor:pointer;padding:0 8px;
  display:grid;place-items:center;text-decoration:none}
/* Etat deja acquis : jaune, comme les badges d'etat de la planche « Mes
   echanges » (« Colis en route », « Proposition recue »). Charte : le jaune
   accompagne et rechauffe sans remplacer le rose. Ni gris, ni vert d'eau. */
.fcard .mini.on{background:var(--jaune);color:var(--anthracite)}
.fcard .mini:hover{filter:brightness(.97)}

/* ---------- Parcours « Ajouter une figurine » ----------
   Relevés sur ajouter_une_figurine_a_ma_collection.jpg et
   selection_des_figurines_pour_ajouter_a_ma_collection.jpg :
   cartes de catégorie 334x74,4 espacées de 13,9 ; bouton de validation
   176,6x32,1 centré ; bouton de carte 58,5x14,4. */

/* Barre de recherche du bandeau */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--vert);
  border-radius:999px;padding:9px 18px;margin-inline:calc(var(--app-pad) + var(--app-gutter))}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-size:var(--fs-body);color:var(--anthracite)}
.searchbar input::placeholder{color:var(--anthracite);opacity:.65}
.searchbar button{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1}

/* Cartes de catégorie (marque ou groupe) */
.catlist{display:flex;flex-direction:column;gap:14px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.catcard{display:flex;align-items:center;gap:16px;background:var(--creme);
  border-radius:var(--card-r);padding:12px 18px;min-height:74px;
  text-decoration:none;color:inherit}
.catcard:hover{filter:brightness(.985)}
.catcard .thumb{width:48px;height:48px;flex:none;border-radius:12px;background:var(--vert);
  display:grid;place-items:center;overflow:hidden}
.catcard .thumb img{width:100%;height:100%;object-fit:cover}
.catcard .thumb img.ph{width:62%;height:auto;opacity:.35}
.catcard .txt{flex:1;min-width:0}
.catcard .t{display:block;font-size:var(--fs-row);font-weight:700;line-height:1.2}
.catcard .st{display:block;font-size:var(--fs-body);line-height:1.3;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Grille de sélection multiple : la carte cochée prend le contour pointillé
   rose de la maquette. Charte : rose = action à déclencher (« Ajouter »),
   jaune = état déjà acquis (« J'ai ! »). */
.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-inline:calc(var(--app-pad) + var(--app-gutter))}
.pickcard{position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--creme);border-radius:var(--card-r);padding:10px 8px;
  text-align:center;cursor:pointer}
.pickcard input{position:absolute;opacity:0;pointer-events:none}
.pickcard .vis{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.pickcard .vis img{width:100%;height:100%;object-fit:contain}
.pickcard .vis .ph{width:34%;opacity:.22}
.pickcard .fn{font-size:12px;font-weight:700;line-height:1.2;min-height:1.2em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickcard .fs{font-size:11px;line-height:1.2;min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pickcard .mini{margin-top:auto}
.pickcard .mini{width:100%;font-family:'Schoolbell',cursive;font-weight:400;
  font-size:13px;line-height:1;min-height:22px;border-radius:999px;
  background:var(--rose);color:var(--blanc);display:grid;place-items:center;padding:0 8px}
.pickcard input:checked ~ .mini{background:var(--jaune);color:var(--anthracite)}
.pickcard input:checked ~ .vis{opacity:.92}
.pickcard:has(input:checked){outline:2px dashed var(--rose);outline-offset:-2px}
.pickcard input:focus-visible ~ .mini{outline:3px solid var(--rose);outline-offset:2px}

/* Bandeau de validation, en fin de liste comme sur la maquette */
.pickbar{background:var(--stripes-app);border-radius:var(--card-r);
  margin-inline:var(--app-gutter);padding:22px var(--app-pad);text-align:center}
.pickbar p{font-size:var(--fs-row);margin-bottom:14px}
.pickbar button{font-family:'Schoolbell',cursive;font-weight:400;font-size:var(--fs-h2);
  color:var(--blanc);background:var(--rose);border:0;border-radius:999px;
  padding:9px 28px;cursor:pointer}
.pickbar button[disabled]{opacity:.45;cursor:default}

/* Zoom d'une photo (demande Luc) : dialog natif, aucune librairie. */
dialog.zoom{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh}
dialog.zoom::backdrop{background:rgba(28,28,30,.88)}
dialog.zoom img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--card-r)}
dialog.zoom button{position:fixed;top:16px;right:16px;width:36px;height:36px;border:0;
  border-radius:50%;background:var(--rose);color:var(--blanc);font-size:20px;line-height:1;cursor:pointer}

/* Croix de retrait, en coin de carte. Un signe, pas une illustration.
   Son formulaire est sorti du flux, sinon la regle qui plaque les CTA en bas
   de carte le pousserait lui aussi vers le bas. */
.fcard{position:relative}
.fcard form.rmform{position:absolute;top:6px;right:6px;margin:0;z-index:1}
.rm{width:22px;height:22px;border:0;border-radius:50%;
  background:transparent;color:var(--anthracite);font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;opacity:.45;padding:0}
.rm:hover{opacity:1;background:var(--blanc);color:var(--rose)}

/* Pagination : la maquette colore 1 en rose, 2 en jaune, 3 en mint.
   Ici : page courante en rose, les autres alternent jaune et mint. */
.pager{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:8px}
.pager a,.pager span{min-width:21px;height:21px;display:grid;place-items:center;
  border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;color:var(--anthracite)}
.pager .on{background:var(--rose);color:var(--blanc)}
.pager .alt0{background:var(--jaune)}
.pager .alt1{background:var(--vert)}
.pager .arrow{color:var(--rose);font-weight:400}
.pager .gap{color:var(--rose)}

/* ---------- Adaptation des écrans plus larges ----------
   La maquette de Léna est mobile uniquement (artboard 393). Le mobile ci-dessus
   est la référence ; en dessous on ne fait qu'élargir la colonne et monter d'un
   cran l'échelle typo. La nav basse reste : c'est la navigation principale de
   l'app connectée, elle n'a pas d'équivalent maquetté sur grand écran. */
@media (min-width:768px){
  :root{
    --app-maxw:560px; --app-pad:32px;
    --fs-h1:28px; --fs-h2:22px; --fs-name:19px; --fs-row:18px;
  }
  .app{padding-top:24px}
  .app-head img{width:64px}
}

@media (min-width:1024px){
  :root{--app-maxw:640px; --row-h:76px; --fs-h1:32px; --fs-h2:24px; --fs-tile-n:26px}
  .app{padding-top:40px}
  .app-head img{width:72px}
  .bottomnav{width:min(340px,calc(100% - 96px))}
}