/* ══════════════════════════════════════════════════════════════════════════
   SUPER AI MILLION — L'ANNONCE QUI S'OUVRE SUR LES DEUX SITES
   ══════════════════════════════════════════════════════════════════════════
   ⚠⚠ TOUT LE STYLE EST ICI, ET C'EST OBLIGATOIRE. Les deux sites interdisent
      qu'un programme ou qu'un style s'ecrive DANS la page
      (`script-src 'self'; style-src 'self'`). Un `<style>` dans le HTML, ou un
      `style="..."` pose a la main, serait refuse par le navigateur SANS AUCUN
      message : l'annonce ne s'afficherait pas, et rien ne le dirait.
      Le programme (million.js) ne fait donc que poser et retirer des CLASSES.

   ⚠ LES COULEURS SONT CELLES DU SITE, pas les miennes : --nuit, --or, --bleu
     sont deja definies dans styles.css. On les reprend, avec une valeur de
     secours pour le site d'analyse si elles n'y sont pas.
   ══════════════════════════════════════════════════════════════════════════ */

.saim-pop {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(4, 7, 16, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
}
.saim-pop.ouvert { opacity: 1; visibility: visible; }

/* ⚠⚠ PLUS AUCUNE BARRE A DROITE — CLOCLO, 20 OCTOBRE : « j'ai une barre a
   droite pour baisser ou monter la page. Il faut un popup entier, sans barre
   pour descendre ou monter. »
   LA CAUSE, MESUREE : le contenu faisait 736 px de haut, TOUJOURS les memes,
   quelle que soit la taille de l'ecran. Sur un ecran de 720 px, la boite ne
   pouvait en montrer que 688 : 48 px manquaient, d'ou la barre. Mesure faite
   sur neuf tailles d'ecran — la barre n'apparaissait QUE sous 768 px de haut,
   c'est-a-dire sur un portable courant, pas sur un telephone. C'est pour ca
   qu'elle m'avait echappe : mon banc mesurait la hauteur de la boite, et il la
   voyait tenir, sans jamais regarder si le CONTENU, lui, tenait dedans.
   LA REPARATION, ET CE N'EST PAS UN MASQUAGE : on ne cache pas la barre, on
   fait en sorte qu'il n'y ait plus rien a faire defiler. La boite est une
   colonne ; tous ses blocs gardent leur taille SAUF la carte, qui est la seule
   a pouvoir retrecir. Elle prend la place qui reste, et comme elle garde son
   rapport cinq sur sept, elle reste une carte. Aucune hauteur n'est ecrite en
   dur : ajouter une ligne de texte demain ne recreera pas la barre. */
.saim-pop-boite {
  position: relative;
  /* ⚠⚠ UNE GRILLE, ET PAS DEUX COLONNES EMPILEES. Premier essai : j'avais mis
     la carte et le texte dans deux colonnes, et sur un telephone la carte
     passait AVANT le titre — un ordre qu'il n'a jamais valide. Avec une grille,
     l'ordre de lecture ne depend plus de l'ordre des blocs : en hauteur, titre
     puis carte puis bouton ; en largeur, la carte se range a gauche et le texte
     se replie a droite. Rien ne bouge dans le HTML. */
  display: grid;
  grid-template-columns: 1fr;
  /* ⚠ `minmax(0, 1fr)` ET NON `minmax(0, auto)` POUR LA RANGEE DE LA CARTE.
     Mesure du 20 octobre : avec `auto`, la rangee se dimensionne sur son
     contenu et la carte ne cede JAMAIS — il manquait encore 131 px sur un
     ecran de 660. Avec `1fr`, la rangee prend ce qui reste et peut descendre
     jusqu'a zero ; la carte, elle, ne depasse jamais ses 336 px grace a son
     propre `max-height`. C'est la rangee qui plie, pas le texte. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "haut" "carte" "bas";
  width: 100%; max-width: 360px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border-radius: 24px;
  padding: 26px 20px 20px;
  text-align: center;
  color: #fff;
  font-family: var(--police, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(232, 161, 0, .20), transparent 58%),
    linear-gradient(180deg, #0b1427 0%, var(--nuit, #070b18) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(232, 161, 0, .26);
  transform: translateY(14px) scale(.97);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.saim-pop.ouvert .saim-pop-boite { transform: none; }

/* ── LES DEUX COLONNES ──
   Par defaut elles ne font rien : la carte au-dessus, le texte en dessous,
   exactement comme avant. Elles ne servent que sur un ecran large et plat. */
.saim-pop-haut  { grid-area: haut; }
.saim-pop-bas   { grid-area: bas; }
.saim-pop-col-carte {
  grid-area: carte;
  display: flex; flex-direction: column; align-items: center;
  min-height: 0; min-width: 0;
}

/* ⚠⚠ L'ECRAN LARGE ET PLAT — UN TELEPHONE COUCHE.
   MESURE : a 375 px de haut, la carte tombait a ZERO pixel et il restait une
   barre de 5 px. La place existe, mais a cote. On passe donc en deux colonnes :
   la carte a gauche, tout le texte a droite. La carte reprend une vraie
   hauteur, et plus rien ne deborde. */
@media (max-height: 560px) and (min-width: 560px) {
  .saim-pop-boite {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "carte haut" "carte bas";
    gap: 4px 20px;
    max-width: 620px; padding: 18px 20px;
    text-align: left;
  }
  /* ⚠ La carte occupe les DEUX rangees a gauche, donc elle est bornee par la
     hauteur de la boite et elle peut ceder. `min-height: 0` reste
     indispensable : sans lui, un bloc de grille refuse de descendre sous la
     taille de son contenu, et la barre revient. */
  .saim-pop-col-carte { justify-content: center; min-height: 0; }
  .saim-pop-scene { margin: 0 auto; }
  .saim-pop-titre, .saim-pop-accroche, .saim-pop-chiffres,
  .saim-pop-nom, .saim-pop-lot, .saim-pop-sous, .saim-pop-date,
  .saim-pop-plus { text-align: left; }
  .saim-pop-accroche { margin-top: 4px; }
  .saim-pop-nom { margin-top: 10px; }
  .saim-pop-btn { margin-top: 12px; }
  .saim-pop-points { margin-top: 10px; }
}

/* la croix */
.saim-pop-croix {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1; font-size: 19px; line-height: 1;
  cursor: pointer; z-index: 3;
}
.saim-pop-croix:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* le titre et le slogan */
.saim-pop-titre {
  font-size: 13px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #e8a100;
}
.saim-pop-accroche {
  margin-top: 10px;
  font-size: 25px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
}
.saim-pop-accroche b { color: #fde047; font-weight: 800; }
/* ⚠ CETTE LIGNE DIT LES VRAIS CHIFFRES, et elle ne doit pas disparaitre :
   « devenir millionnaire avec 2 $ » est VRAI — le ticket Diamond coute 2 $ et
   le lot est d'un million — mais ca ne se dit honnetement qu'avec le nombre de
   tickets a cote. C'est aussi son meilleur argument : 600 000, c'est tres loin
   des 13 983 816 combinaisons du Loto. */
.saim-pop-chiffres {
  margin-top: 9px;
  font-size: 12.5px; line-height: 1.6; color: #94a3b8;
}
.saim-pop-chiffres b { color: #e2e8f0; font-weight: 600; }

/* la scene : une carte a la fois, les cinq empilees */
/* ⚠ `flex: 0 1 auto` + `min-height: 0` : LE SEUL BLOC QUI A LE DROIT DE
   RETRECIR. `min-height: 0` est indispensable — sans lui, un bloc de colonne
   refuse de descendre sous la taille de son contenu, et la barre revient.
   `max-height` plutot que `height` : sur un grand ecran la carte garde ses
   336 px, elle ne grandit pas jusqu'a devenir ridicule. */
.saim-pop-scene {
  position: relative;
  min-height: 0;
  margin: 16px auto 0;
  height: 336px; max-height: min(336px, 100%);
  aspect-ratio: 5 / 7; width: auto;
}
/* ⚠⚠ `container-type: size` FAIT DE LA CARTE LE REPERE DE SON PROPRE TEXTE.
   Tout ce qui est ecrit dessus est ensuite donne en `cqw` — un pourcentage de
   la LARGEUR DE LA CARTE. C'est exactement ce que le portefeuille fait avec sa
   variable `--w`, et avec les memes proportions. Sans ca, la carte retrecit
   mais son texte garde sa taille, et il deborde des panneaux.
   ⚠ ET IL Y A UN FILET plus bas (`@supports`) pour un navigateur trop ancien
     qui ne connaitrait pas les conteneurs : il retombe sur des tailles fixes
     et sur une carte qui ne retrecit pas. */
.saim-pop-carte {
  position: absolute; inset: 0;
  container-type: size;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 161, 0, .28);
  opacity: 0; transform: translateX(26px) scale(.96);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.saim-pop-carte.on { opacity: 1; transform: none; }
.saim-pop-carte img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}

/* LE TEXTE ECRIT PAR-DESSUS LE DESSIN.
   ⚠ POURQUOI IL EST ECRIT ET PAS CUIT DANS L'IMAGE : ses dessins portent le
     texte EN FRANCAIS. L'annonce est en anglais. Le portefeuille resout deja ce
     probleme de la meme facon depuis le 19 octobre — meme dessin, meme
     decoupage, et c'est ce decoupage-la qui est repris ici, au pourcentage
     pres (mesure sur les cinq dessins, cale sur l'UNION des cinq). */
.saim-pop-k { position: absolute; inset: 0; direction: ltr; text-align: left;
  line-height: 1; }
.saim-pop-k .gain, .saim-pop-k .res, .saim-pop-k .pied {
  position: absolute; color: #fff; unicode-bidi: plaintext;
}
/* ⚠ 53,4 % EST MESURE SUR LES CINQ DESSINS, pas choisi : les pastilles cuites
   ne sont pas tout a fait a la meme hauteur d'une carte a l'autre (53,51 % sur
   le Diamond, 54,43 % sur le Gold), et celle-ci doit toutes les couvrir. */
/* ⚠⚠ 53,3 % ET UNE PASTILLE ASSEZ HAUTE — MESURE DU 20 OCTOBRE.
   Les pastilles cuites dans les cinq dessins ne tiennent pas la meme place :
   53,51 % a 55,69 % sur le Diamond, mais 54,30 % a 57,54 % sur le Metal, qui
   porte en plus une ombre sous sa pastille. Avec une pastille trop plate,
   mesure a l'ecran : une bande du texte francais restait visible SOUS la
   pastille anglaise du Metal.
   ⚠ LA HAUTEUR EST DONNEE EN `em`, PAS EN PIXELS : elle suit donc la taille du
     texte, et elle couvre encore la bande sur un petit ecran, ou la carte est
     retrecie. Un reglage en pixels aurait lache la exactement ou personne ne
     regarde. */
.saim-pop-k .res {
  left: 0; right: 0; top: 53.3%;
  display: flex; gap: .6em; justify-content: center;
}
.saim-pop-k .res span {
  background: #0e0a04; color: #efe6cf; border-radius: 999px;
  padding: 1em 1.1em; font-size: 2.08cqw; letter-spacing: .12em; line-height: 1;
  font-weight: 500; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.saim-pop-k .gain {
  left: 58.5%; top: 1.8%; width: 37.5%; height: 10.6%;
  background: linear-gradient(180deg, #120e05, #070502);
  border-radius: 1.67cqw;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 0 1.67cqw;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.saim-pop-k .gain .lab {
  font-size: 2.08cqw; letter-spacing: .12em; color: #d9b45f;
  font-weight: 500; text-transform: uppercase;
}
.saim-pop-k .gain .val {
  font-size: 5.2cqw; font-weight: 700; letter-spacing: -.01em; margin-top: .83cqw;
}
.saim-pop-k .gain .val i { font-style: normal; font-size: .62em; color: #d9b45f; }
.saim-pop-k .pied {
  left: 4.6%; top: 66%; width: 90.8%; height: 30.6%;
  background: linear-gradient(180deg, #1a1408, #050402);
  border-radius: 2.5cqw; padding: 2.92cqw;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.saim-pop-k .pied .h { display: flex; justify-content: space-between; align-items: flex-end; }
.saim-pop-k .pied .lab {
  font-size: 1.92cqw; letter-spacing: .14em; color: #d9b45f;
  font-weight: 500; text-transform: uppercase; display: block;
}
.saim-pop-k .pied .gros {
  font-size: 4.17cqw; font-weight: 700; margin-top: .83cqw; display: block;
}
.saim-pop-k .pied .d { text-align: right; }
.saim-pop-k .pied .tickets {
  margin-top: auto; display: flex; flex-direction: column; gap: 1.25cqw;
  letter-spacing: .06em;
}
.saim-pop-k .pied .tickets .nb { font-size: 3.13cqw; color: #efe6cf; font-weight: 600; }
.saim-pop-k .pied .tickets .site { font-size: 2.71cqw; color: #cdbe94; }

/* les cinq points */
.saim-pop-points { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.saim-pop-pt {
  width: 7px; height: 7px; flex: 0 0 7px; padding: 0; border: none;
  border-radius: 50%; background: rgba(255, 255, 255, .20);
  cursor: pointer; transition: all .3s;
}
.saim-pop-pt.on { background: #e8a100; width: 22px; flex: 0 0 22px; border-radius: 4px; }

/* le nom de la carte et son lot */
.saim-pop-nom {
  margin-top: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #cbd5e1;
}
.saim-pop-lot {
  margin-top: 4px;
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fde047;
}
.saim-pop-sous { margin-top: 4px; font-size: 12px; color: #94a3b8; }

/* le bouton et la date */
.saim-pop-btn {
  display: block; width: 100%; margin-top: 16px; padding: 15px;
  border: none; border-radius: 14px;
  background: linear-gradient(135deg, #f0c040 0%, #e8a100 55%, #c98600 100%);
  color: #1a1205; font-size: 15px; font-weight: 700; text-align: center;
  text-decoration: none; cursor: pointer;
}
.saim-pop-date { margin-top: 11px; font-size: 11.5px; color: #94a3b8; }
.saim-pop-plus {
  display: inline-block; margin-top: 9px;
  font-size: 11.5px; color: #93c5fd; text-decoration: underline;
}

/* ⚠ LE FILET : un navigateur trop ancien pour les conteneurs ne comprendrait
   ni `cqw` ni le retrecissement, et la carte sortirait sans texte lisible. On
   lui redonne alors une carte de taille fixe et des tailles de texte en
   pixels — exactement ce que faisait la version du 20 octobre au matin. */
@supports not (container-type: size) {
  .saim-pop-boite { overflow-y: auto; }
  .saim-pop-scene { height: 336px; width: 240px; aspect-ratio: auto; flex: 0 0 auto; }
  .saim-pop-k .gain { border-radius: 4px; padding: 0 4px; }
  .saim-pop-k .gain .lab { font-size: 5px; }
  .saim-pop-k .gain .val { font-size: 12.5px; margin-top: 2px; }
  .saim-pop-k .res span { font-size: 5px; }
  .saim-pop-k .pied { border-radius: 6px; padding: 7px; }
  .saim-pop-k .pied .lab { font-size: 4.6px; }
  .saim-pop-k .pied .gros { font-size: 10px; margin-top: 2px; }
  .saim-pop-k .pied .tickets { gap: 3px; }
  .saim-pop-k .pied .tickets .nb { font-size: 7.5px; }
  .saim-pop-k .pied .tickets .site { font-size: 6.5px; }
}

/* ⚠ TRES PETIT ECRAN (telephone couche, vieux portable) : la carte a deja
   retreci toute seule ; ici on reduit AUSSI le texte autour, sinon il ne reste
   plus assez de place pour que la carte reste une carte. */
@media (max-height: 620px) {
  .saim-pop-boite { padding: 18px 16px 14px; }
  /* ⚠ sur un ecran etroit ET plat, les deux lignes d'explication prennent la
     place de la carte : on les retire, l'accroche et les chiffres de la carte
     disent deja l'essentiel. */
  .saim-pop-chiffres { font-size: 10.5px; line-height: 1.45; }
  .saim-pop-accroche { font-size: 20px; }
  .saim-pop-chiffres { font-size: 11px; }
  .saim-pop-lot { font-size: 21px; }
  .saim-pop-scene { margin-top: 10px; }
  .saim-pop-btn { padding: 12px; margin-top: 11px; }
}

/* Quelqu'un qui a demande moins d'animations ne doit pas subir le defilement :
   il voit la premiere carte, et il change avec les points s'il veut. */
@media (prefers-reduced-motion: reduce) {
  .saim-pop, .saim-pop-boite, .saim-pop-carte { transition: none; }
}