/* ============================================================================
   ui.css — les composants partagés des sous-pages de tiklive.eu
   Chargée par `tl_page_head()` pour TOUTES les pages qui passent par
   `site/page.php`, juste après `halo.css` et AVANT les lots de page : une page
   garde donc le dernier mot sur ce qu'elle veut vraiment particulariser.

   POURQUOI ELLE EXISTE
   ────────────────────
   /shop, /shop/<slug>, /jeu/<slug>/liens, /shop/retour.php et
   /shop/lien-perdu.php ont été écrites à la chaîne, chacune avec son bloc
   `<style>`. Elles décrivaient toutes LA MÊME carte, LE MÊME champ, LE MÊME
   encadré d'avertissement — avec à chaque fois un rayon, une opacité et une
   taille de texte légèrement différents. Relevé sur le rendu le 21/09/2026 :
   cartes en 16 / 17 / 18 px de rayon, boutons en 40 / 48 / 54 px de haut,
   titres de section en 19 px sur une page et 56 px sur la voisine.

   Ce qui est ici est ce qui apparaissait au moins DEUX fois. Le reste est
   resté dans la page — voir le commentaire de chaque bloc `<style>` restant.

   RÈGLES TENUES
   ─────────────
   • Aucune couleur écrite en dur : tout vient des tokens de `base.css`,
     `halo.css` et `signature.css` (chargée en dernier, c'est elle qui fait foi
     sur --txt, --dim, --rose-2, --cyan…).
   • Aucune largeur minimale non bornée. Toute grille utilise
     `minmax(min(Xpx,100%),1fr)` : `minmax(300px,1fr)` déborde dès que l'écran
     est plus étroit que 300 px + les gouttières. Déjà payé le 19/09.
   • Tout bloc qui affiche une URL, un chemin ou une clé porte
     `overflow-wrap:anywhere` : ces chaînes n'ont aucun espace où se couper et
     poussent sinon la page entière (mesuré à 2963 px sur un écran de 375).
   • Les boutons ne sont PAS redéfinis ici. Le site en a déjà : `.btn-p`
     (principal), `.btn-g` (secondaire), modificateurs `.btn-s` / `.btn-p--xl`.
     Les sous-pages écrivaient `class="btn-s"` TOUTE SEULE — or `.btn-s` n'est
     qu'un modificateur de taille : sans `.btn-p`/`.btn-g` le bouton n'avait ni
     fond, ni relief, ni `display:inline-flex`. Corrigé dans le HTML, pas ici.
   ========================================================================== */

:root{
  /* Échelle typographique des SOUS-PAGES. Volontairement plus basse que celle
     de l'accueil : une page de boutique ou de liens est un document, pas une
     affiche. --h2 vaut jusqu'à 58 px sur l'accueil, ce qui n'a aucun sens
     au-dessus d'une liste de trois cartes. */
  --u-h2:clamp(22px,2.6vw,30px);   /* titre de section */
  --u-h3:19px;                     /* titre de groupe dans une liste */
  --u-t:17px;                      /* titre de carte */
  --u-txt:15.5px;                  /* texte courant d'une sous-page */
  --u-txt-s:13.5px;                /* texte secondaire */
  --u-fine:12.5px;                 /* mentions, étiquettes de champ */

  /* Rayons : DEUX valeurs, pas quatre. Les cartes suivent --hm-rayon (20 px,
     posé par halo.css) pour rester dans la même famille que l'accueil ; les
     petits objets (champs, encadrés, pastilles) prennent --u-rayon-s. */
  --u-rayon:var(--hm-rayon);
  --u-rayon-s:12px;
}

/* ── En-tête de page ──────────────────────────────────────────────────────── */
/* ⚠ PADDING VERTICAL SEULEMENT. Ces en-tetes portent aussi `.wrap`, qui pose
   `padding: 0 var(--gut)` pour tenir la gouttiere. Un raccourci `padding: 88px 0`
   l ecrasait : le titre se retrouvait 24 px a gauche du texte qu il coiffe sur
   grand ecran, et COLLE AU BORD sur telephone. */
.u-head,.lg-head{padding-top:88px;padding-bottom:8px}
.u-head .h1,.u-head h1,.lg-head .h1{max-width:20ch}
.u-head .lead{margin-top:14px;max-width:64ch}
.u-head .u-fine{margin-top:10px}

.u-sec{padding:34px 0}
.u-sec:last-of-type{padding-bottom:88px}

/* « Page d'état » : une page qui ne dit qu'UNE chose — paiement reçu, paiement
   refusé, lien renvoyé. Titre, phrase, parfois une clé ou un formulaire, un
   bouton de retour. Les trois existantes avaient trois largeurs (560, 640,
   660 px) et trois espacements pour exactement la même forme.
   ⚠ La page d'échec de `/shop/retour.php` s'arrête sur `exit` AVANT le bloc
   `<style>` de fin de fichier : ses règles doivent donc vivre ICI, pas là-bas.
   C'est pour ça que les marges sont décrites en descendants et non en classes
   utilitaires à recopier. */
.u-etat{max-width:640px;padding-bottom:60px}
.u-etat>.u-fine{margin-top:14px}
.u-etat>.u-actions{margin-top:28px}
.u-etat>.u-msg{margin-top:22px}
.u-etat>.u-form{margin-top:26px}

/* ── Titres ───────────────────────────────────────────────────────────────── */
.u-h2{font-size:var(--u-h2);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0}
.u-h3{font-size:var(--u-h3);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.u-ct{font-size:var(--u-t);font-weight:700;letter-spacing:-.012em;line-height:1.25;margin:0}
.u-fine{font-size:var(--u-fine);line-height:1.6;color:var(--dim-2);margin:0}
.u-p{font-size:var(--u-txt-s);line-height:1.6;color:var(--dim);margin:0}

/* ── Cartes ───────────────────────────────────────────────────────────────── */
.u-card{background:var(--hm-surface);border-radius:var(--u-rayon);box-shadow:var(--hm-relief);
  min-width:0}
/* Variante « posée » : le même fond, sans l'ombre portée. Pour les blocs qui
   vivent DANS une carte ou côte à côte en liste, où l'ombre s'empilerait. */
.u-card--flat{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.u-card--pad{padding:18px 18px 20px}

/* ── Grilles ──────────────────────────────────────────────────────────────── */
.u-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.u-grid--s{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px}
.u-grid--xs{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:12px}

/* ── Rangée d'actions ─────────────────────────────────────────────────────
   Les boutons gardent LEUR taille (celle de `base.css`) : c'est justement ce
   que les pages écrasaient une par une. Ici on ne fait que les aligner. */
.u-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
/* signature.css fixe .btn-p a 54px a TOUTES les largeurs, alors que base.css
   ne passe .btn-g a 54 qu'au-dessus de 768px : cote a cote sur telephone, le
   bouton secondaire etait 2 px plus court que le principal. Mesure : 54 / 52. */
.u-actions .btn-g{height:54px}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.u-form{display:flex;flex-direction:column;gap:9px;max-width:420px;min-width:0}
/* Le bouton d'envoi ne s'etire pas a la largeur du champ : deux pages le
   redisaient a l'identique, chacune sous son propre nom de classe. */
.u-form>button,.u-form>.btn-p,.u-form>.btn-g{align-self:flex-start;margin-top:6px}
.u-lab{font-size:var(--u-fine);color:var(--dim)}
.u-field{background:rgba(255,255,255,.05);border:0;border-radius:var(--u-rayon-s);
  padding:14px 15px;color:var(--txt);font:inherit;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.u-field::placeholder{color:var(--dim-2)}
/* Le focus du site, pas une autre teinte : `:focus-visible` de base.css pose
   déjà `3px solid var(--cyan)`. Les pages écrivaient `2px solid #25f4ee`, une
   couleur qui n'existe nulle part ailleurs sur tiklive.eu. */
.u-field:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.u-hint{font-size:12px;line-height:1.55;color:var(--dim-2);margin:0}

/* Choix exclusif présenté en pastilles (moyen de paiement…). */
.u-pick{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.u-pick>label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1 1 150px;
  background:rgba(255,255,255,.04);border-radius:var(--u-rayon-s);padding:12px 14px;
  font-size:var(--u-txt-s);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.u-pick>label:has(input:checked){background:var(--cyan-soft);color:var(--cyan)}
.u-pick input{accent-color:var(--rose)}

.u-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:var(--u-fine);line-height:1.55;color:var(--dim)}
.u-check input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--rose)}

/* ── Messages ─────────────────────────────────────────────────────────────
   Trois pages décrivaient le MÊME encadré doré. Un seul bloc, trois tons. */
.u-msg{margin-top:18px;padding:13px 15px;border-radius:var(--u-rayon-s);
  font-size:var(--u-txt-s);line-height:1.6;overflow-wrap:anywhere}
.u-msg--warn{background:rgba(255,210,74,.1);color:var(--gold)}
.u-msg--ok{background:rgba(52,211,153,.1);color:#34d399}

/* ── Liste à puces ─────────────────────────────────────────────
   `base.css` remet toutes les listes à plat (`list-style:none;padding:0`) : une
   sous-page qui écrit juste `padding-left:20px` n'obtient donc AUCUNE puce.
   C'est ce qui arrivait à « ce qu'il te faut » sur la fiche produit. Le point
   rose est celui des pages légales, qui gardent leur nom de classe. */
.u-ul,.lg-ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.u-ul li,.lg-ul li{position:relative;padding-left:20px;color:var(--dim);line-height:1.7;
  font-size:var(--u-txt);overflow-wrap:anywhere}
.u-ul li::before,.lg-ul li::before{content:'';position:absolute;left:3px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--rose-2)}
.u-ul li strong,.lg-ul li strong{color:var(--txt)}

/* ── Valeurs à copier ─────────────────────────────────────────────────────── */
.u-code{font-family:var(--mono);overflow-wrap:anywhere;min-width:0}
.u-key{padding:18px 20px;margin:28px 0 22px}
.u-key-l{font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--dim-2);margin-bottom:8px}
.u-key-v{font:700 22px/1.35 var(--mono);letter-spacing:2px;color:var(--cyan);
  overflow-wrap:anywhere}

/* Compteur discret (nombre de liens d'un groupe…). */
.u-count{display:inline-flex;align-items:center;font:700 11px/1 var(--mono);
  color:var(--dim-2);background:rgba(255,255,255,.06);padding:5px 8px;border-radius:999px}

@media (max-width:640px){
  .u-head,.lg-head{padding-top:64px;padding-bottom:8px}
  .u-sec{padding:26px 0}
  .u-key-v{font-size:19px}
}