/* ═══════════════════════════════════════════════════════════════════════════
   LES PORTES DU CARNET — la rangée, les tuiles, et le lien qui y mène.

   ── POURQUOI UNE FEUILLE À ELLES, ET C'EST UN DÉFAUT DE PROD QUI L'A EXIGÉE ─
   Ces règles vivaient dans `app.css` (sous le nom `.jumelage-magasins`, puis
   `.magasins`). Or `/jumeler` — la page où tombe le QR sans carnet, et la
   PREMIÈRE surface qui les a portées — fait `@extends('layouts.plain')`, qui
   ne charge jamais `app.css` : tokens, brand, auth, toasts, et rien d'autre.

   Le résultat, vu en prod le 2026-08-25 à 480 px : les deux liens sortaient
   COLLÉS, comme une phrase — « TestFlight Google Play (test) » — soulignés,
   sans espace, sans apparence de bouton. Ni la rangée ni `.btn` n'existent sur
   ce gabarit-là.

   Le défaut dormait depuis le début et ne s'est réveillé qu'avec le SECOND
   lien : une seule fiche configurée, un seul bouton, rien à espacer. C'est le
   patron de la mémoire « CSS juste à la lecture, faux à l'écran » — la règle
   était correcte, elle n'atteignait simplement pas la page qui en avait le plus
   besoin. Et l'ironie utile : le commentaire du `flex-wrap` DÉCRIVAIT le rendu
   qu'on a fini par voir.

   ── TROIS REFUS, POUR ARRIVER ICI ───────────────────────────────────────────
   · Recopier le bloc dans `auth.css` — deux définitions du même bouton, qui
     dériveraient exactement comme le nom `.jumelage-magasins` qu'on venait de
     retirer pour cette raison.
   · Le poser dans `brand.css`, partagée par les deux gabarits — mais c'est la
     PALETTE de la coop (l'accent, ses variantes), pas un magasin de composants.
     Aucun test ne l'interdit ; l'intention du fichier, oui.
   · Charger `app.css` sur `layouts/plain` — six mille lignes de coquille pour
     une page qui n'a ni rail, ni barre, ni écran.

   Reste le patron de `toasts.css` : un petit composant que les DEUX coquilles
   chargent, défini une seule fois. C'est ce fichier.

   ── LE LIEN NE S'APPUIE PLUS SUR `.btn` ─────────────────────────────────────
   `.btn` est le vocabulaire de `app.css`, donc il n'existe pas sur `plain`.
   `.magasins-lien` porte son apparence lui-même — mêmes jetons, même anneau de
   focus, même hauteur : ce n'est pas un bouton de plus dans le système, c'est
   le MÊME dessin rendu indépendant de la coquille qui l'affiche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La rangée : `/jumeler` et la modale de jumelage ───────────────────────
   `flex-wrap` PARCE QUE LE LIBELLÉ DE TEST EST LONG : « TestFlight » et
   « Google Play (test) » côte à côte dépassent la largeur d'un téléphone, et
   deux boutons qui débordent sont pires qu'un bouton par ligne. */
.magasins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ── Le lien de magasin, dans les deux formes ──────────────────────────────
   `inline-flex` et pas `inline` : une boîte en ligne ignore `min-height` et ne
   prend pas la hauteur de son rembourrage vertical — le « bouton » se réduit
   alors à un filet de texte bordé. C'est la leçon d'`a.btn` dans `app.css`, et
   elle se paie deux fois si on l'oublie ici.

   `text-decoration: none` explicitement : rien ne retire le trait d'un lien,
   et sur `plain` il n'y a aucune règle de lieu pour le faire à notre place. */
.magasins-lien,
.magasin-nom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--mil-fs-2);
  font-weight: 600;
  text-decoration: none;
}

.magasins-lien:hover,
.magasin-nom:hover { background: var(--c-hover-bg); }

/* L'anneau de focus signature (§0, règle 7). Redéclaré parce que celui
   d'`app.css` ne suit pas sur `layouts/plain` — et un lien qu'on ne voit pas
   quand on l'atteint au clavier est un lien qu'on perd. */
.magasins-lien:focus-visible,
.magasin-nom:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Le logo suit l'encre du bouton — `currentColor` dans le magasin des marques,
   donc le thème sombre et la palette daltonienne sans une ligne de plus. En
   lien de contenu, il sortait bleu : une pomme bleue. */
.magasins-lien svg,
.magasin-nom svg { flex: none; }

/* ── Les tuiles : « À propos » seulement ───────────────────────────────────
   Deux colonnes égales tant qu'il y a la place. `1fr 1fr` et non `auto-fit` :
   quand une seule plateforme est configurée, la tuile doit rester à la taille
   de sa voisine absente — `auto-fit` l'étirerait sur toute la largeur, et un QR
   de 640 px de large est un défaut qui ne se voit qu'avec une seule fiche
   posée. C'est exactement l'état d'aujourd'hui côté Android. */
.magasins-tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* PAS DE CADRE SUR LA TUILE. Elle en a porté un (bordure + `--c-surface-2`)
   pendant une itération : avec un bouton encadré dedans et le carré blanc du QR
   dessous, ça faisait trois boîtes emboîtées pour deux informations. Le groupe
   se lit déjà — deux colonnes, un écart, chaque colonne alignée sur son axe. */
.magasin-tuile {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

/* LE QR NE SE THÈME PAS : son fond blanc voyage DANS le SVG (`QrSvg` porte le
   raisonnement — une caméra lit mal l'inversé, la zone de silence fait partie
   du code). Ici on ne fait qu'apprivoiser ses coins. */
.magasin-qr { line-height: 0; }
.magasin-qr svg { border-radius: var(--radius); }

/* Le QR ne sert que là où l'écran qu'on LIT et l'appareil où l'on INSTALLE sont
   deux objets différents. Dans la main, ils n'en font qu'un : le nom au-dessus
   est le lien, et le code deviendrait un carré qu'on ne peut pas scanner avec
   l'appareil qui l'affiche. Même raisonnement que « Ouvrir sur ce téléphone »
   d'`/appareils`, pris dans l'autre sens.

   `display: none` et non `visually-hidden` : il n'y a rien à annoncer non plus
   — le bloc est déjà `aria-hidden`, un QR ne se lit pas à voix haute. */
@media (max-width: 700px) {
  .magasin-qr { display: none; }
}