/* =====================================================================================
   FINITIONS MOBILES DU 27/09/2026 — modales longues, jauge du couple, vignettes du monde.
   Relevees par un audit en 390 et 360 px, ecran tactile emule. Tout est ici plutot qu'en
   ligne dans index.html : trois agents touchaient le meme fichier le meme jour.
   ===================================================================================== */

/* 1. FICHES MARCHE ET JOUEUR : LES BOUTONS D'ACTION TOUJOURS A PORTEE DE POUCE.
   Sur telephone ces fiches font 1 500 px et plus ; « Ouvrir une discussion », « Payer au
   guichet », « Prolonger », « Vendre » n'arrivaient qu'apres les 34 attributs. C'est
   l'OVERLAY qui defile (la modale grandit avec son contenu, voir .overlay dans
   index.html) : une barre en `position:sticky;bottom:0` reste donc collee au bas de
   l'ecran tant que la fiche est visible, et reprend sa place naturelle tout en bas.
   Fond opaque et filet en haut : le texte qui defile dessous ne doit pas transparaitre.
   Les marges negatives lui font toucher les bords de la modale (padding de 22 px).
   `bottom:-16px` compense le padding de l'overlay : avec 0, la barre s'arretait 16 px
   au-dessus du bord de l'ecran et le texte defilait, visible, dans cette fente. */
@media (max-width:640px){
  .modal .fiche-actions{
    position:sticky;bottom:-16px;z-index:2;
    margin:14px -22px -22px;padding:10px 22px calc(12px + env(safe-area-inset-bottom));
    background:#141c3a;border-top:1px solid var(--line,#26305a);
    border-radius:0 0 18px 18px;box-shadow:0 -10px 18px -8px #05070fcc;
  }
  /* Le premier bouton de la barre gardait sa marge du flux normal : inutile ici. */
  .modal .fiche-actions>.btn:first-child{margin-top:0!important}
  /* Fiche joueur : deux boutons cote a cote, de meme largeur, sans deborder en 360 px. */
  .modal .rowb.fiche-actions{gap:8px;flex-wrap:nowrap;align-items:stretch}
  .modal .rowb.fiche-actions>.btn{flex:1 1 0;min-width:0;white-space:normal;line-height:1.2;text-align:center;justify-content:center}
}

/* 2. VIE PRIVEE > SOCIAL : LA JAUGE DU COUPLE. Les reperes « Mariage » et « Enfant »
   etaient ecrits AU-DESSUS de la jauge, sur la ligne ou le mot du moral (« Rayonnante »)
   est aligne a droite : sous 640 px les deux se chevauchaient. On passe les libelles des
   reperes SOUS la jauge, ou rien d'autre n'est ecrit. Le selecteur est plus precis que
   celui de vie-sociale.js, qui injecte sa feuille apres celle-ci. */
@media (max-width:640px){
  .vs-moral .vs-moral-r{margin-bottom:16px}
  .vs-moral .vs-moral-marks>span::after{top:auto;bottom:-16px}
  /* Les deux reperes (75 % et 90 %) ne sont qu'a ~40 px l'un de l'autre en 360 px :
     centres, leurs libelles se chevauchaient a leur tour. « Mariage » s'ecrit donc a
     GAUCHE de son trait, « Enfant » a DROITE du sien. */
  .vs-moral .vs-moral-marks>span[data-l="Mariage"]::after{left:auto;right:4px;transform:none}
  .vs-moral .vs-moral-marks>span[data-l="Enfant"]::after{left:4px;transform:none}
}

/* 3. INFOS MONDE : LES VIGNETTES SOUS LA UNE. Le titre (blanc, 11 px) etait pose a nu
   sur la photo, et les photos de match sont souvent claires (maillots, ciel, pelouse
   ensoleillee) : l'ombre portee ne suffisait pas. Un degrade sombre monte du bas de la
   vignette, sous le texte seulement, et laisse l'image lisible au-dessus. */
#iu-vign-zone .iu-vign div::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;
  background:linear-gradient(to top,#05070fe6 0%,#05070fa0 45%,#05070f00 100%);
}
#iu-vign-zone .iu-vign span{z-index:1}
@media (max-width:640px){
  /* Sur telephone les vignettes font ~110 px de large : 12 px se lit, 11 px non.
     Les vignettes non choisies etaient a demi effacees (opacite .55) : on les garde en
     retrait, mais lisibles. */
  #iu-vign-zone .iu-vign span{font-size:12px;left:5px;right:5px}
  #iu-vign-zone .iu-vign div{opacity:.8}
  #iu-vign-zone .iu-vign div.on{opacity:1}
}