/* Accueil — feuille du widget « QR code & lien court ».

   UN WIDGET = UN FICHIER, ici aussi : ce style vivait dans le monolithe
   css/components.css, à rebours de la règle du projet. Il est chargé par sa
   propre balise <link> dans index.html, à côté du <script> du widget, et
   inscrit dans le socle du Service Worker (sw.js) — sans quoi il
   manquerait hors ligne. */

/* ---- Gestionnaire de liens (QR code & lien court) ----------------------

   Le widget ne défile PAS : quand la carte manque de place, c'est le QR qui
   rétrécit, jamais les boutons du dessous qui disparaissent. D'où la colonne
   flex où une seule zone est élastique.

   `--qrw-h` porte la hauteur disponible, mesurée en JS. Le CSS sait ajuster à
   la largeur d'un conteneur (`cqw`) mais pas à sa hauteur : `container-type:
   size` exige une hauteur définie, que la carte n'a pas en disposition en flux.
   Sans cette mesure, un QR calé sur la seule largeur débordait d'une carte
   large et basse. */
/* Dernier recours seulement : le QR rétrécit jusqu'à son plancher, et si même
   ainsi la carte est trop petite, on DÉFILE. Rogner ferait disparaître les
   boutons sans rien dire ; un défilement les laisse atteignables. */
.qrw { overflow-y: auto; overflow-x: hidden; gap: 7px; }
/* Un peu d'air sous la ligne de saisie : collée au QR, elle donnait
   l'impression d'un même bloc alors que ce sont deux choses distinctes. */
.qrw__saisie { display: flex; gap: 6px; align-items: stretch; flex: none;
  margin-bottom: 4px; }
/* Le bouton change de rôle une fois le lien traité : il efface. Le rouge le
   dirait trop fort pour un geste sans conséquence — l'adresse se recolle — donc
   il perd simplement son accent. */
.qrw__go--vider { background: var(--glass-inner);
  border-color: var(--glass-inner-border); color: var(--text-4); }
.qrw__go--vider:hover { background: rgba(248, 113, 113, .16); color: var(--danger); }
.qrw__go--vider .ico { color: inherit; }
.qrw__url { flex: 1; min-width: 0; }
.qrw__vide { font: 400 11px/1.5 var(--mono); color: var(--text-5); margin: 0; }
/* Le message d'accueil reste EN HAUT, sous le champ qu'il commente — le
   descendre au milieu l'aurait éloigné de ce dont il parle — et son texte est
   centré sur toute la largeur de la section.

   C'est bien le TEXTE qui est centré, pas le bloc qui le contient. Un bloc
   borné en `ch` et centré paraissait décalé : ses lignes, plus courtes que la
   borne et alignées à gauche, ne remplissaient pas la boîte. Aucune largeur
   en CSS ne s'ajuste à la plus longue ligne une fois le texte coupé, d'où le
   centrage du texte lui-même. */
.qrw > .qrw__vide { align-self: stretch; text-align: center; }

/* La zone du QR est la SEULE élastique : elle absorbe ce qui reste. */
.qrw__zone { flex: 1 1 auto; min-height: 48px; display: flex;
  justify-content: center; align-items: center; }
/* Fond blanc TOUJOURS : un QR inversé se lit mal, quel que soit le thème.

   Carré, et c'est plus délicat qu'il n'y paraît. `height: 100%` + `aspect-ratio`
   + `max-width` ne donne PAS un carré : quand la largeur est la contrainte, elle
   est rognée sans que la hauteur suive, et le cadre blanc devient un bandeau
   vertical — 261 × 419 px, mesuré. L'inverse (`width: 100%` + `max-height`)
   produit le défaut symétrique dans une carte basse.

   On pilote donc la LARGEUR seule, la hauteur en découlant par `aspect-ratio`.
   Le carré est alors garanti dans tous les cas. */
.qrw__qr { aspect-ratio: 1; min-height: 48px; width: min(100%, 320px);
  background: #fff; padding: 5px; border-radius: var(--r-sm); line-height: 0;
  box-sizing: border-box; }
/* En disposition LIBRE seulement, la hauteur restante borne le QR — c'est elle
   qui manque. `--qrw-zone` la porte, mesurée par le widget.

   Pas en flux, et ce n'est pas un oubli : là, la hauteur de la zone est celle
   du QR lui-même. S'en servir comme borne serait un cliquet — une fois le QR
   descendu à 200 px, la zone mesure 200 px, et élargir la carte ne le ferait
   plus jamais remonter. En flux c'est donc un plafond fixe, et la carte
   grandit avec lui. */
.page--free .qrw__qr { width: min(100%, calc(var(--qrw-zone, 300) * 1px)); }
.qrw__qr svg { width: 100%; height: 100%; display: block; }

/* Le lien court est ce qu'on dicte ou recopie : il se lit de loin, et suit les
   DEUX dimensions de la carte. */
.qrw__court { flex: none; margin: 0; text-align: center; word-break: break-all;
  color: var(--accent-soft); line-height: 1.25;
  font-family: var(--mono); font-weight: 500;
  /* Le coefficient est calé sur la longueur d'un lien is.gd — une vingtaine de
     caractères — pour qu'il occupe la carte sans la déborder. */
  font-size: clamp(13px, 8cqw, 26px); }
/* La hauteur ne borne le lien QUE si elle est imposée, c'est-à-dire en
   disposition libre. En flux la carte grandit avec son contenu : s'en servir
   comme contrainte reviendrait à le borner par lui-même, et le lien resterait
   collé à son plancher quelle que soit la largeur de la carte — mesuré, 13 px
   dans une carte qui en permettait 21. */
.page--free .qrw__court {
  font-size: clamp(13px, min(8cqw, calc(var(--qrw-h, 300) * 0.062px)), 26px); }

/* Boutons d'action : le même verre que le reste de l'interface. Le pointillé
   de `.btn--ghost` annonce un emplacement à remplir — « Ajouter une section » —
   et disait donc le contraire de ce que font ces boutons-là. */
.qrw__actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.qrw__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 30px; padding: 0 11px; border-radius: var(--r-md); cursor: pointer;
  font: 400 11.5px var(--sans); color: var(--text-2);
  background: var(--glass-inner); border: 1px solid var(--glass-inner-border); }
.qrw__actions .qrw__btn { flex: 1 1 auto; }
.qrw__btn:hover { background: rgba(255, 255, 255, .1); color: var(--text-strong);
  border-color: rgba(255, 255, 255, .2); }
.qrw__btn .ico { font-size: 13px; color: var(--text-4); }
.qrw__btn:hover .ico { color: var(--accent-soft); }
.qrw__btn[disabled] { opacity: .5; cursor: default; }
/* Carte basse : les libellés s'effacent et les trois boutons tiennent sur une
   rangée. Le titre reste en infobulle. */
.qrw--serre .qrw__actions .qrw__btn { flex: 1 1 0; padding: 0; }
.qrw--serre .qrw__actions .qrw__btn > span { display: none; }
/* « Traiter » : l'action principale, à la hauteur exacte du champ qu'elle
   valide — `stretch` sur la ligne, pas de hauteur fixe qui dériverait.

   Son libellé est MASQUÉ, pas absent : le laisser dans un bouton de 34 px le
   faisait déborder, et comme il suit l'icône dans l'ordre du texte, c'est
   l'icône qui se retrouvait poussée à gauche du centre. Masqué, le `gap` ne
   s'applique plus non plus, et l'icône tombe au milieu. Le mot reste en
   infobulle — un pictogramme seul ne dit pas ce qu'il fait. */
.qrw__go { flex: none; align-self: stretch; height: auto; width: 34px; padding: 0;
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .4); color: var(--accent-soft); }
.qrw__go > span { display: none; }
.qrw__go:hover { background: rgba(var(--accent-rgb), .28); color: var(--text-strong); }
.qrw__go .ico { color: var(--accent-soft); font-size: 15px; }

/* Ce que la vue projecteur montrera. Des pastilles pressées, comme les
   contrôles segmentés du reste de l'interface — une case système y aurait
   détonné. */
.qrw__fs { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.qrw__coche { flex: 1 1 auto; height: 24px; padding: 0 9px; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap; font: 400 10.5px var(--sans);
  color: var(--text-4); background: none; border: 1px solid var(--glass-field-border); }
.qrw__coche:hover { color: var(--text-2); background: rgba(255, 255, 255, .06); }
.qrw__coche[aria-pressed="true"] { background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .38); color: var(--accent-soft); font-weight: 500; }

/* ---- Vue projecteur ----------------------------------------------------
   Le fond d'écran de la page passe DERRIÈRE, flouté : la projection reste
   dans l'univers du tableau de bord au lieu de tomber sur un noir plat. */
.fs__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1); transform: scale(1.08); opacity: .5; }
.qrfs { display: flex; flex-direction: column; align-items: center; gap: 3.5vh;
  position: relative; z-index: 1; }
.qrfs__qr { background: #fff; padding: 2vh; border-radius: 12px; line-height: 0;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.qrfs__qr svg { width: min(58vh, 58vw); height: auto; display: block; }
/* Les liens sont là pour être RECOPIÉS par une salle. Leur taille dépend donc
   de ce qui les accompagne : à côté d'un QR, ils partagent l'écran et restent
   mesurés ; seuls, ils ont tout l'espace et n'ont aucune raison de s'en priver.
   D'où deux jeux de tailles, et une classe qui dit lequel s'applique.

   Mais la HAUTEUR ne suffit pas à décider : `--ch` porte la longueur du lien,
   posée par le widget, et la largeur de l'écran divisée par ce nombre borne le
   reste. Sans ce second terme, un lien court écrit en très grand débordait et
   se coupait au milieu d'un mot — le même oubli que pour la vue projecteur des
   horloges, et il se voit tout autant. 0,62 em est la chasse des caractères de
   la police monospace, mesurée. */
.qrfs__court { margin: 0; max-width: 86vw; text-align: center; word-break: break-all;
  font: 600 clamp(26px, 7vh, 74px)/1.2 var(--mono); color: var(--text-strong);
  font-size: min(clamp(26px, 7vh, 74px), calc(86vw / (0.62 * var(--ch, 24))));
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.qrfs--sans-qr .qrfs__court {
  font-size: min(clamp(34px, 13vh, 150px), calc(86vw / (0.62 * var(--ch, 24)))); }
/* L'adresse longue en projection : nettement plus grande qu'avant. Elle est
   là pour être RECOPIÉE par une salle, pas pour figurer en pied de page — à
   13 px on ne la lisait pas au-delà du premier rang. */
.qrfs__long { margin: 0; max-width: 88vw; text-align: center; word-break: break-all;
  font: 500 clamp(20px, 4.4vh, 46px)/1.3 var(--mono); color: rgba(255, 255, 255, .88);
  font-size: min(clamp(20px, 4.4vh, 46px), calc(88vw / (0.62 * var(--ch, 40))));
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.qrfs--sans-qr .qrfs__long {
  font-size: min(clamp(26px, 8vh, 92px), calc(88vw / (0.62 * var(--ch, 40)))); }