/* Le bandeau du haut: la carte de joueur, la bulle photo, les compteurs.
 *
 * 🔑 L'échelle vient de la maquette approuvée. La carte fait 236 px, pas moins.
 * En la rétrécissant à 212, on supprime le couloir vide entre le texte
 * « LIGUE TERRAIN QUÉBEC » et le bord droit de la carte. C'est dans ce couloir
 * que passe la flèche. Sans lui, elle barre le texte, peu importe où on la met.
 */

.bandeau { display: flex; flex-direction: column; gap: 18px; padding: 26px 0 22px; }
.band { display: grid; grid-template-columns: 236px 1fr; gap: 34px; align-items: center; position: relative; }

/* 🔑 La carte suit le modele des cartes de joueur de jeu video, a la demande
   d'Alexandre le 16 septembre 2026. Ce n'est pas de la decoration: le
   candidat reconnait le format en une seconde, et la case photo vide y est
   une anomalie visible. C'est ce qui fait deposer la photo.

   Trois choses tiennent le rendu, et aucune n'est cosmetique:
     · la photo DEBORDE jusqu'au bord coupe. Le clip-path de la carte la
       recoupe. Une photo qui s'arrete avant le bord a l'air collee.
     · elle s'efface en degrade sur ses 18 derniers pourcents (mask-image),
       pour que le sujet fonde dans l'or au lieu d'etre pose dans un cadre.
       Nos candidats envoient des selfies rectangulaires, pas des decoupes.
     · les attributs sont en flex-wrap et pas en grille: le dernier rang se
       centre tout seul, et un sixieme attribut n'exigerait rien.

   ⚠️ La note globale n'est PAS affichee, c'est la decision verrouillee du
   plan de match: la photo prend sa place. La colonne de gauche a la place
   pour un gros chiffre si cette decision change, il n'y a qu'a rajouter
   un <div class="cote"> et sa regle est deja ecrite plus bas. */

/* ---------- la carte, sur le modele des cartes de joueur ---------- */
.fut {
  /* ⚠️ La pointe mange de la hauteur utile: tout le contenu doit tenir
     AU-DESSUS d'elle, sinon le clip-path coupe les attributs en deux.
     Releve le 17 septembre 2026 apres avoir agrandi la photo. La pointe
     commence donc a 82 % et non 74 %, et le rapport suit. */
  /* Le rapport 3/4 avait ete calcule pour loger cinq notes sous le nom.
     Sans elles, il restait un creux entre le nom et la pointe. On resserre:
     la carte garde sa silhouette, la photo occupe la place gagnee. */
  width: 236px; aspect-ratio: 1/1.2; position: relative;
  padding: 14px 15px 10px;
  clip-path: polygon(7% 0, 93% 0, 100% 5%, 100% 82%, 50% 100%, 0 82%, 0 5%);
  background:
    linear-gradient(118deg, transparent 40%, rgba(255,255,255,.18) 40% 53%, transparent 53%),
    linear-gradient(62deg,  transparent 48%, rgba(255,255,255,.11) 48% 60%, transparent 60%),
    linear-gradient(148deg, transparent 64%, rgba(120,92,30,.18) 64% 76%, transparent 76%),
    linear-gradient(158deg, var(--or1) 0%, var(--or2) 28%, var(--or3) 60%, var(--or4) 100%);
  display: flex; flex-direction: column;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.6));
}

/* ---------- le haut: colonne de gauche, photo a droite ---------- */
/* Hauteur FIXE, pas flex: 1.

   En laissant le haut s'etirer, la photo debordait du cadre dore par le
   haut et le nom finissait dans la pointe, illisible. Les notes parties,
   on redonne leur place a la photo, mais mesuree: 152 px au lieu de 116,
   et le nom garde son air en dessous. */
.fut .haut { display: grid; grid-template-columns: 56px 1fr; gap: 2px;
             position: relative; z-index: 2; height: 152px; }

.fut .gauche { padding-top: 3px; text-align: center; }
.fut .cote { font-family: var(--cond); font-weight: 800; font-size: 38px; line-height: .82;
             color: #2E2208; letter-spacing: -.02em; }
.fut .pos  { font-family: var(--cond); font-weight: 800; font-size: 16px; line-height: 1;
             color: #3B2D0B; letter-spacing: .05em; margin-top: 2px; }
.fut .sep  { height: 1px; background: rgba(59,45,11,.42); margin: 6px 6px 5px; }
.fut .lg   { font-family: var(--cond); font-weight: 700; font-size: 9.5px; letter-spacing: .07em;
             color: #5A4720; text-transform: uppercase; line-height: 1.2; }

/* La photo tombe jusqu'a la ligne du nom, sans cadre: le sujet est coupe
   par le trait, il n'est pas pose dans une vignette. */
.fut .slot {
  /* 🔑 CENTREE, pas collee a droite. Sur la carte de jeu qui sert de
     reference, le sujet est au milieu, juste au-dessus du nom, et le code
     de ligue vit dans la marge de gauche sans le toucher. Collee au bord
     droit, la carte penchait et le cote gauche paraissait vide.

     Le degrade ne fait plus que le bas, et court. Depuis que le portail
     detoure la photo au televersement, les bords sont deja transparents:
     un degrade lateral mangerait les epaules d'une silhouette deja
     decoupee. Il reste utile aux photos deposees avant le detourage,
     celles qui portent encore leur fond. */
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 68%; height: calc(100% + 14px); z-index: 1; overflow: hidden;
  border: 0; background: none; border-radius: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  -webkit-mask-image: linear-gradient(#000 94%, transparent 100%);
          mask-image: linear-gradient(#000 94%, transparent 100%);
}
/* 🔑 « contain » et cale en bas, pas « cover ».
   Ce qui arrive ici est maintenant une personne sur fond transparent.
   « cover » recadrait dedans et coupait la tete, releve sur une vraie
   photo le 17 septembre 2026. « contain » garde la silhouette entiere et
   « bottom » la fait tenir debout sur le filet du nom.

   Le relevage sert aux photos prises au telephone, le soir, a contre-jour:
   sans lui le visage se noie dans l'or fonce. Modere, pour ne pas bruler
   une photo deja bien eclairee. */
.fut .slot img { width: 100%; height: 100%; object-fit: contain;
  object-position: bottom center; filter: brightness(1.2) contrast(1.06) saturate(1.04); }
/* tant qu'il n'y a pas de photo, la case se voit et appelle le geste */
/* Tant qu'il n'y a pas de photo, la case revient dans le flux: en absolu
   elle flotterait par-dessus le texte au lieu d'occuper sa place. */
.fut .slot:not(.ok) { position: static; transform: none; width: auto; height: 104px;
                      align-self: stretch;
                      border: 2px dashed #5E4A18; border-radius: 9px;
                      background: rgba(255,255,255,.17); margin: 4px 0 10px;
                      -webkit-mask-image: none; mask-image: none; }
.fut .slot:not(.ok):hover { background: rgba(255,255,255,.3); }
.fut .slot svg { width: 23px; height: 23px; stroke: #4A3A12; fill: none; stroke-width: 1.8; }
.fut .slot .t { font-family: var(--cond); font-weight: 800; font-size: 11px; line-height: 1;
                color: #4A3A12; text-transform: uppercase; letter-spacing: .03em; }
.fut .slot .changer {
  position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.62); color: #F2E0AC;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 0; text-align: center; opacity: 0; transition: .15s;
}
.fut .slot.ok:hover .changer, .fut .slot.ok:focus-visible .changer { opacity: 1; }

/* ---------- le nom ---------- */
.fut .nom {
  font-family: var(--cond); font-weight: 800; font-size: 22px; text-transform: uppercase;
  text-align: center; color: #2E2208; margin: 2px 0 6px; position: relative; z-index: 3;
  border-top: 1px solid rgba(59,45,11,.45); border-bottom: 1px solid rgba(59,45,11,.45);
  padding: 4px 0 3px; letter-spacing: .01em; line-height: 1.05;
}

/* ---------- sans les notes ----------

   Le bloc des cinq attributs occupait le tiers bas de la carte. En le
   retirant, le nom se retrouvait seul au-dessus d'un vide, colle sous la
   photo, et la pointe dorée avalait le bas. La photo reprend donc la
   hauteur liberee et le nom se pose juste au-dessus de la pointe, la ou
   l'oeil le cherche sur ce genre de carte.                             */
.fut .nom { margin-top: 2px; }

.colonne-carte { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- bulle photo ----------
   Position de la maquette approuvée. La pointe du tracé est en (9, 38) d'une
   flèche de 104 x 60 posée 26 px plus bas que le haut du bloc. Avec le bloc à
   left 196 et top 6, la pointe tombe en (205, 70): dans le couloir vide à
   droite du texte de la carte, exactement à la hauteur de la case photo.

   🔑 La bulle est en position absolue et l'accroche ne lui réserve AUCUNE
   place. Quand la photo est déposée, la bulle disparaît et rien ne bouge.
   Lui réserver la place faisait sauter tout le texte au moment du dépôt. */

.tip {
  position: absolute; left: 196px; top: 6px; z-index: 9;
  display: flex; align-items: flex-start; gap: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--ui); text-align: left;
}
.tip .arw { flex: none; width: 104px; height: 60px; margin-top: 26px; }
.tip .bul {
  display: block; background: var(--warn); color: #3A2A05; border-radius: 11px;
  padding: 12px 15px; max-width: 216px;
  box-shadow: 0 14px 30px rgba(255,194,75,.2); transition: .15s;
}
.tip:hover .bul { background: #FFCF6E; }
.tip .bul b {
  display: block; font-family: var(--cond); font-size: 18px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px;
}
.tip .bul span { display: block; font-size: 12.5px; line-height: 1.42; font-weight: 500; }

/* ---------- accroche et compteurs ---------- */

.hi h1 {
  font-family: var(--cond); font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02; margin: 0 0 10px; text-transform: uppercase;
}
.hi h1 em { font-style: normal; color: var(--gold); }
.hi p { margin: 0; color: var(--txt2); font-size: 14.5px; line-height: 1.55; max-width: 56ch; }

.kpis { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 4px; }
.kpi { background: var(--surf); border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; min-width: 118px; }
.kpi .n { font-family: var(--cond); font-weight: 800; font-size: 29px; line-height: 1; }
.kpi .l { font-size: 10px; font-weight: 700; letter-spacing: .11em; color: var(--txt3); text-transform: uppercase; margin-top: 3px; }
.kpi.q .n { color: var(--warn); }
.kpi.q { border-color: rgba(255,194,75,.35); }
.kpi.q.plein .n { color: var(--bad); }
.kpi.q.plein { border-color: rgba(255,92,122,.4); }

/* ---------- téléphone ----------
   La carte passe à côté du texte plutôt qu'au-dessus, et la bulle descend
   sous la carte: à 375 px de large, il n'y a aucun couloir où faire passer
   une flèche. */

@media (max-width: 920px) {
  .bandeau { gap: 12px; padding: 16px 0 12px; }
  .band { grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }

  .fut { width: 150px; padding: 10px 9px 8px; }
  .fut .haut { grid-template-columns: 38px 1fr; height: 86px; }
  .fut .cote { font-size: 26px; }
  .fut .pos { font-size: 12px; }
  .fut .sep { margin: 4px 3px 3px; }
  .fut .lg { font-size: 7px; letter-spacing: .05em; }
  .fut .nom { font-size: 15px; margin-bottom: 5px; padding: 3px 0 2px; }
  .fut .slot { top: -10px; }
  .fut .slot:not(.ok) { height: 70px; margin: 3px 0 6px; }
  .fut .slot svg { width: 17px; height: 17px; }
  .fut .slot .t { font-size: 8.5px; }

  .tip { position: static; grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  .tip .arw { display: none; }
  .tip .bul { max-width: none; width: 100%; padding: 9px 12px; position: relative; }
  .tip .bul::before {
    content: ""; position: absolute; top: -7px; left: 31px;
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-bottom: 7px solid var(--warn);
  }
  .tip .bul b { font-size: 15px; }
  .tip .bul span { font-size: 11.5px; }

  .hi p { font-size: 12.5px; line-height: 1.45; }
  .kpis { gap: 8px; }
  .kpi { padding: 9px 12px; min-width: 0; flex: 1; }
  .kpi .n { font-size: 23px; }
  .kpi .l { font-size: 8.5px; letter-spacing: .05em; }
}