/* ==========================================================
FITZUNIVERSE — BOURSES (scholarships.html)
Repose sur css/base.css + css/header.css + css/catalog.css +
css/homepage-sections.css + css/animations.css — page publique, même
identité visuelle que index.html (même header, même thème clair).

CE QUI N'EST PLUS ICI (2026-08-22)
----------------------------------
Bannière, barre de filtres, raccourcis pays, groupes par pays,
barre de résultats, grille, puces, squelettes et état vide ont
déménagé dans css/catalog.css. Ils étaient recopiés à l'identique
dans universities.css — 349 lignes strictement jumelles à deux
marges près pour le seul bloc `.catalog-*`, plus les mêmes
composants écrits deux fois sous deux noms
(.bourses-results-count/.uni-results-count,
.scholarship-card-chip/.uni-card-chip,
.bourses-empty-state/.uni-empty-state...).

Ces deux pages sont celles qu'un visiteur enchaîne toujours : une
bourse mène à ses universités partenaires. Elles doivent se
ressembler au pixel, et une correction sur l'une doit valoir pour
l'autre. Deux copies garantissaient l'inverse.

Ne rien redéfinir de tout cela ici : css/catalog.css est chargée
AVANT cette feuille, une règle réintroduite à cet endroit écraserait
silencieusement le système commun sur cette seule page.

Il ne reste donc ici QUE la carte de bourse.
========================================================== */


/* ==========================================================
CARTE DE BOURSE
==========================================================
Refondue le 2026-08-22. Ce qu'elle affichait avant, et pourquoi ça
ne tenait pas :

  - une LIGNE PAYS (drapeau + nom) juste sous la photo, alors que
    l'en-tête du groupe qui surplombe la carte annonce déjà ce pays,
    drapeau compris. La même information deux fois à 40 px d'écart ;
  - une DESCRIPTION générée automatiquement — « Bourse d'État
    accordée par le gouvernement de X financée à 100 %, ouverte du
    niveau Licence, Master. » — dont chaque élément était répété
    juste en dessous sous forme de puces. Trois lignes de texte pour
    zéro information nouvelle, sur toutes les cartes, à l'identique ;
  - un CTA en gros bouton bordé pleine largeur qui pesait plus lourd
    que le titre de la bourse.

À la place, la carte dit enfin ce qu'elle seule sait : le NOMBRE
D'UNIVERSITÉS PARTENAIRES. Il était déjà calculé par
enrichWithProgramData() (champ `partnerCount`) et n'était affiché
nulle part — c'est pourtant la réponse à « est-ce que cette bourse
ouvre sur beaucoup de portes ? », et c'est exactement ce que le
clic va montrer.
========================================================== */

.scholarship-card{

position:relative;

display:flex;

flex-direction:column;

background:var(--background);

border-radius:var(--radius-lg);

border:1px solid var(--border-color);

box-shadow:var(--shadow-xs);

overflow:hidden;

/* Seules la translation, l'ombre et la bordure s'animent. `all`
mettait aussi le dégradé de la photo et les couleurs de puces sur
le fil du compositeur pour rien. */
transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}

.scholarship-card:hover{

/* -6px et non -8px : au survol d'une grille dense, un saut trop
franc donne l'impression que la grille bouge sous le curseur. */
transform:translateY(-6px);

box-shadow:var(--shadow-lg);

border-color:var(--amber-500);

}

/* ---- Photo ----
Elle représente le PAYS ou le programme, jamais un établissement
précis : une bourse est rattachée à un État, pas à une université.
Voir .uni-card-media (universities.css) pour la déclinaison
« campus » du catalogue voisin. */
.scholarship-card-media{

position:relative;

height:158px;

overflow:hidden;

flex-shrink:0;

}

.scholarship-card-media img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .55s var(--ease-premium);

}

.scholarship-card:hover .scholarship-card-media img{ transform:scale(1.05); }

/* Voile allégé. L'ancien empilait deux dégradés à 85 % et 95 %
d'opacité : la photo disparaissait sous un aplat gris-bleu, et
toutes les cartes finissaient par se ressembler. Ici il ne fait
que ce dont on a besoin — assombrir le bas pour asseoir le badge
d'état, et poser une amorce sombre en haut. */
.scholarship-card-media::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(180deg, rgba(7,10,22,.34) 0%, transparent 42%, rgba(7,10,22,.42) 100%);

}

/* ---- Badge d'état, posé sur la photo ---- */
.scholarship-card-status{

position:absolute;

top:13px;

left:13px;

z-index:2;

display:flex;

align-items:center;

gap:6px;

padding:5px 11px 5px 9px;

border-radius:var(--radius-full);

background:rgba(255,255,255,.94);

backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);

font-size:.72rem;

font-weight:var(--fw-bold);

/* Plus de text-transform:uppercase ni de letter-spacing : « OUVERTE »
en capitales espacées criait plus fort que le titre de la bourse,
qui est pourtant ce qu'on vient lire. */
color:var(--text-light);

}

/* Pastille de statut — le seul point coloré du haut de carte. 8px
suffisent : elle est lue en même temps que le mot juste à côté,
jamais seule, donc elle n'a pas à porter le sens à elle seule. */
.scholarship-card-status::before{

content:"";

width:7px;

height:7px;

border-radius:50%;

background:var(--text-decorative);

flex-shrink:0;

}

.scholarship-card-status.is-open{ color:var(--success-700); }

.scholarship-card-status.is-open::before{ background:var(--success-600); }

/* ---- Corps ---- */
.scholarship-card-body{

flex:1;

display:flex;

flex-direction:column;

gap:13px;

padding:20px 22px 22px;

}

.scholarship-card-body h3{

font-family:var(--font-display);

font-size:var(--fs-card-title);

font-weight:var(--fw-extrabold);

line-height:1.3;

letter-spacing:-.015em;

color:var(--text-color);

}

/* Type de bourse (bailleur) — sous-titre texte discret sous le titre,
rendu uniquement quand le champ `funder` existe en base (voir
libelleFunder, js/scholarship-filters.js). Volontairement du texte nu,
pas une puce ni un badge : le badge Fitz (.fitz-badge) est un composant
unique de css/base.css et ne se détourne pas. */
.scholarship-card-funder{

font-size:.82rem;

font-weight:var(--fw-semibold);

letter-spacing:.02em;

color:var(--text-light);

margin-top:-4px;

}

/* Description RÉELLE seulement — celle saisie en base. La phrase
générée automatiquement qui occupait cette place répétait le pays,
le financement et les niveaux affichés juste en dessous (voir
buildDescription dans scholarships.js).
line-clamp à 3 lignes : une description longue ne doit pas faire
d'une carte le double de la hauteur de ses voisines dans la grille. */
.scholarship-card-desc{

font-size:.88rem;

line-height:1.6;

color:var(--text-light);

display:-webkit-box;
-webkit-line-clamp:3;
line-clamp:3;
-webkit-box-orient:vertical;

overflow:hidden;

}

/* Nombre d'universités partenaires — l'information que cette carte
est seule à porter, et la promesse de ce que le clic va ouvrir. */
.scholarship-card-partners{

display:flex;

align-items:center;

gap:7px;

font-size:.85rem;

color:var(--text-light);

}

.scholarship-card-partners i,
.scholarship-card-partners svg{

width:15px;

height:15px;

flex-shrink:0;

color:var(--amber-700);

}

.scholarship-card-partners strong{

font-weight:var(--fw-extrabold);

font-variant-numeric:tabular-nums;

color:var(--text-color);

}

.scholarship-card-meta{

display:flex;

flex-wrap:wrap;

gap:7px;

}

/* Autres pays éligibles — affiché seulement quand la bourse en ouvre
d'autres que celui de son groupe (voir showCountriesRow dans
scholarships.js), sinon c'est une redite. */
.scholarship-card-countries{

display:flex;

flex-wrap:wrap;

align-items:baseline;

gap:5px;

padding-top:2px;

font-size:.78rem;

line-height:1.55;

color:var(--text-muted);

}

.scholarship-card-countries strong{

font-weight:var(--fw-semibold);

color:var(--text-light);

}

/* ---- Appel à l'action ----
Lien texte + flèche, aligné en bas de carte, plutôt qu'un bouton
bordé pleine largeur : la carte ENTIÈRE est cliquable (voir
scholarships.js), ce bouton n'était donc pas la cible mais son
étiquette. Un gros bouton pour une cible qui fait toute la carte,
c'était du poids visuel sans fonction. */
.scholarship-card-cta{

margin-top:auto;

padding-top:15px;

border-top:1px solid var(--border-color);

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

background:none;

border-left:none;
border-right:none;
border-bottom:none;

font-family:inherit;

font-size:.86rem;

font-weight:var(--fw-bold);

color:var(--amber-700);

text-align:left;

cursor:pointer;

}

.scholarship-card-cta i,
.scholarship-card-cta svg{

width:16px;

height:16px;

flex-shrink:0;

transition:transform .25s var(--ease-premium);

}

.scholarship-card:hover .scholarship-card-cta i,
.scholarship-card:hover .scholarship-card-cta svg{ transform:translateX(4px); }

/* La carte entière est cliquable : c'est elle qui doit montrer le
focus clavier, pas seulement le lien à l'intérieur. */
.scholarship-card:focus-within{

outline:2px solid var(--amber-700);

outline-offset:3px;

}

.scholarship-card-cta:focus-visible{ outline:none; }


@media(max-width:720px){

.scholarship-card-media{ height:140px; }

.scholarship-card-body{ padding:18px 18px 20px; }

}

/* Photo de carte entière sur téléphone (2026-09-03) : à 140px de haut
sur une carte de 343px, la vignette était une fente de 2,45:1 qui
coupait ~40 % d'une photo 3:2. Ratio 16/10 à la place — toute la
largeur de l'écran est disponible, la photo se voit presque en entier
(≤ 7 % de recadrage sur du 3:2, 0 % sur du 16:10). */
@media(max-width:720px){
.scholarship-card-media{ height:auto; aspect-ratio:16/10; }
}