/* ============================================================================
   tirages — LA FEUILLE DES DEUX LANGUES.

   Le CSS n'a pas de langue. Cette feuille etait ecrite DEUX FOIS : une dans
   tirages.html, une recopiee a la main dans en/tirages.html. Reunies le 09/09/2026 —
   une retouche se fait desormais a UN seul endroit.

   Preuve du deplacement : tools/empreinte-styles.py, qui compare le style
   CALCULE de chaque element avant et apres, aux deux largeurs et dans les
   deux themes.
   ============================================================================ */

/* ---------- Tirages sur téléphone (mesuré le 22/08 à 375 px) ----------
   Avant : la page mesurait 640 px de large pour 375 d'écran — le sélecteur de
   catégorie atteignait 620 px, le tableau 472 px, la carte du graphique 394 px.
   Avant : la page mesurait 556 px de large pour 375 d'écran — le sélecteur de
   catégorie, le tableau (472 px) et la carte du graphique débordaient.
   Ici : sélecteurs bornés à 100 %, tableau remplacé par des cartes sous 700 px
   (il reste tel quel sur ordinateur), carte du graphique qui ne laisse rien
   dépasser. Ces règles ne vivent que sur cette page (FR et EN identiques). */
.tirage-cartes { display: none; }
#tableCatSelect, #catSelect { max-width: 100%; min-width: 0; }
.chart-card { overflow: hidden; }
.chart-select { min-width: 0; max-width: 100%; }
.chart-select select { min-width: 0; flex: 1 1 auto; }
#chartCrs svg, #chartInv svg { width: 100%; height: auto; display: block; }
@media (max-width: 699px) {
  .tirage-table-wrap { display: none; }
  .tirage-cartes { display: grid; gap: 10px; }
  .tirage-carte { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
  .tc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .tc-tete time { font-size: .9375rem; font-weight: 600; color: var(--navy-dark); }
  .tirage-carte .cat-badge { font-size: .875rem; white-space: normal; }
  .tc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .tc-stat b { display: block; font-family: Sora, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--red-dark); font-variant-numeric: tabular-nums; }
  .tc-stat span { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }
  /* Sélecteurs : pleine largeur, 44 px de haut, texte à 16 px (pas de zoom forcé sur iPhone) */
  .tirage-filtre { flex-direction: column; align-items: stretch; gap: 6px; }
  .tirage-filtre label { font-size: .875rem; }
  .tirage-filtre select, .chart-select select { width: 100%; min-height: 44px; font-size: 1rem; padding: 10px 12px; }
  .chart-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .chart-select { flex-direction: column; align-items: stretch; gap: 6px; font-size: .875rem; }
  .chart-legende .leg-item { font-size: .875rem; }
  .tv-stats { gap: 22px; flex-wrap: wrap; }
  .tv-stat span { font-size: .875rem; }
}

/* Les prix posés par js/iv-pay.js arrivent avec un <small> pour la devise :
   on le garde à la taille du chiffre, pour que rien ne bouge à l'écran. */
[data-ivpay-prix] small { font-size: 1em; }

/* ══ 12/10/2026 — REFONTE DE LA PRISE EN MAIN : LE DERNIER TIRAGE D'ABORD ════
   Mesuré avant. Ordinateur (1280 × 900) : bouton rouge du titre + formulaire
   d'alerte, puis les onglets, puis un second titre : le dernier tirage
   commençait à 930 px, sous le pli. Téléphone (375 × 812) : le dernier tirage
   vivait DANS un volet fermé (rien ne s'ouvre seul au téléphone, ordre
   d'Alex du 09/09) — on ne voyait qu'une inscription et deux boutons.
   · Ordinateur : le dernier tirage et l'alerte côte à côte, dès le premier
     écran ; les onglets (graphique et historique, liens utiles) en dessous.
   · Téléphone : le dernier tirage, puis l'alerte, empilés ; les onglets
     restent un choix du visiteur. */
.tir-apercu { padding-top: var(--sp-6); padding-bottom: 0; }
.tir-apercu-grille { display: grid; gap: var(--sp-4); }
.tir-apercu .alerte-invite { margin-bottom: 0; }
.tir-apercu .tirage-vedette { margin-bottom: 0; }
.tirage-vedette h2 { margin-top: 0; }
.tv-date { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); font-weight: 500;
  color: color-mix(in srgb, var(--sur-couleur) 86%, transparent); }
.tir-apercu .share-bar { margin-top: var(--sp-3); }
@media (min-width: 980px) {
  .tir-apercu-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-5); align-items: start; }
  .tir-apercu #tirageVedette { display: flex; flex-direction: column; min-width: 0; }
  .tir-apercu .alerte-invite { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; }
  .tir-apercu .alerte-invite-texte { flex: 0 0 auto; }
}
@media (max-width: 699px) {
  .tir-apercu { padding-top: var(--sp-5); }
  .tir-apercu .tirage-vedette { padding: var(--sp-5); gap: var(--sp-4); }
  .tir-apercu .tirage-vedette .btn { width: 100%; justify-content: center; text-align: center; }
}
/* Le titre de l'alerte devient un h2 (il suit le h2 du dernier tirage) : même dessin que l'ancien h3. */
.alerte-invite h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1.35; color: var(--navy-dark); letter-spacing: 0; }