/* ==========================================================
FITZUNIVERSE — FICHE UNIVERSITÉ
========================================================== */

.back-link{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--text-light);
font-weight:500;
font-size:var(--fs-small);
}

.back-link:hover{color:var(--amber-700);}
.back-link i,
.back-link svg{width:16px;height:16px;}

.btn-lg{padding:16px 28px;font-size:var(--fs-body);}
.btn-sm{padding:9px 16px;font-size:var(--fs-small);border-radius:10px;}

/* ---------- Hero ---------- */

/* Bannière alignée le 2026-08-22 sur .catalog-hero (css/catalog.css) :
même voile en trois couches, même éclat ambré en haut à droite, même
badge en verre. C'est l'écran qui suit un clic depuis l'un des deux
catalogues — il devait cesser d'avoir sa propre recette.
Elle reste définie ICI et non dans catalog.css : la fiche n'est pas
un catalogue (pas de filtres, pas de grille, pas de groupes), et
l'y faire entrer aurait obligé catalog.css à connaître une page qui
n'en est pas une. Ce sont les VALEURS qui sont partagées, via les
tokens ; si le voile doit changer, il change aux deux endroits — et
c'est écrit ici pour qu'on n'en oublie qu'un. */
.details-hero{
position:relative;
/* padding:0 : .details-hero est un <section>, et css/base.css donne
110px de rembourrage vertical à tout élément `section`. Ces 220px
s'ajoutaient à ceux de .details-hero-inner (118px + 42px), d'où une
bannière de 564px pour 344px de contenu — soit 220px de vide, dont
une bonne moitié SOUS le titre alors que le contenu est aligné en
bas. Troisième manifestation du même piège sur cette seule page
(voir aussi .details-section) : `section` sert ici de conteneur de
contenu, pas de grande section de page d'accueil. */
padding:0;
min-height:340px;
display:flex;
align-items:flex-end;
overflow:hidden;
}

.details-hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.04);
filter:saturate(1.06) contrast(1.02);
}

.details-hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 58% 76% at 88% 8%, rgba(233,163,25,.30) 0%, rgba(233,163,25,.09) 46%, transparent 70%),
linear-gradient(102deg, rgba(13,10,6,.94) 0%, rgba(20,16,13,.80) 42%, rgba(20,16,13,.34) 100%),
linear-gradient(180deg, rgba(13,10,6,.30) 0%, transparent 34%, rgba(13,10,6,.62) 100%);
}

/* 118px en haut : le header public est fixed et flotte sur la photo.
Sans cette réserve il couvrait le drapeau et le nom de
l'établissement au chargement, avant de s'effacer au premier
défilement. */
.details-hero-inner{
position:relative;
z-index:1;
padding:118px 0 42px;
color:#fff;
}

/* .back-link (css/base.css, 2026-08-28) : sa couleur de base
(--text-light) est illisible posée sur une photo — même piège que le
h1 juste plus bas (voir son commentaire), donc même correctif :
couleur explicite plutôt qu'héritée. Opacité légère au repos (comme
.details-hero-sub) pour rester secondaire face au badge pays/titre qui
suivent, pleine opacité au survol pour confirmer l'interactivité. */
.details-hero-inner .back-link{
color:#fff;
opacity:.82;
margin-bottom:20px;
text-shadow:0 1px 3px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.2);
}

.details-hero-inner .back-link:hover{
opacity:1;
color:#fff;
}

.details-hero-badge{
display:flex;
align-items:center;
gap:9px;
width:max-content;
max-width:100%;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:8px 16px;
border-radius:var(--radius-full);
font-family:var(--font-display);
font-size:.82rem;
font-weight:var(--fw-bold);
letter-spacing:-.005em;
margin-bottom:18px;
}

.details-hero-badge i,
.details-hero-badge svg{width:15px;height:15px;flex-shrink:0;color:var(--amber-500);}

.details-hero-badge img{width:20px;height:14px;object-fit:cover;border-radius:2px;}

.details-hero-inner h1{
font-family:var(--font-display);
font-weight:var(--fw-extrabold);
font-size:clamp(1.9rem,3.6vw,2.65rem);
line-height:var(--lh-snug);
letter-spacing:var(--ls-tight);
margin-bottom:10px;
text-wrap:balance;
/* La règle globale h1-h6 (css/base.css) cible h1 directement et gagne
sur le color:#fff de .details-hero-inner (une valeur héritée perd
toujours face à une règle déclarée sur l'élément) — sans ce color
explicite le titre de la bourse restait bleu marine sur sa propre
photo de héros, quasi illisible. Même bug que .cta-box. */
color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
}

.details-hero-sub{
font-size:var(--fs-lead);
opacity:.9;
margin-bottom:6px;
text-shadow:0 1px 3px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.2);
}

/* var(--accent-color) (#7E71D8) recalculé (2026-08-13) : 3,05 à 4,46:1
selon la zone du dégradé de .details-hero-overlay, sous l'AA (4,5:1)
même dans le meilleur cas — même écart que .cta-card-badge plus bas et
que les badges de scholarships.html/universities.html. Blanc plein,
comme le h1 juste au-dessus (color:#fff) sur ce même fond : 17,85:1. */
/* Ambre plutôt que blanc : c'est le fil que le visiteur suit depuis
le catalogue (.uni-card-scholarship est ambre sur la carte qu'il
vient de cliquer). La même information garde la même couleur d'un
écran à l'autre. --amber-500 tient 6,8:1 à 8,2:1 sur ce voile. */
.details-hero-scholarship{
font-size:var(--fs-body);
color:var(--amber-500);
font-weight:var(--fw-bold);
text-shadow:0 1px 3px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.2);
}

/* ---------- Layout ---------- */

.details-body{
display:grid;
grid-template-columns:1fr 340px;
gap:40px;
padding:48px 0 100px;
align-items:start;
}

.details-main{
display:flex;
flex-direction:column;
gap:36px;
}

/* Les blocs de la colonne principale sont des éléments <section>, et
css/base.css donne à TOUT `section` un rembourrage vertical de
110px — pensé pour les grandes sections d'une page d'accueil.
Empilés dans une colonne qui gère déjà son écart avec `gap:36px`,
ils ajoutaient 220px de vide chacun : près de 700px de blanc entre
"Avant de candidater", "À propos de cette opportunité" et
"Informations clés", sur une fiche qui tient en un écran et demi.
Même piège que les groupes pays des catalogues (voir
.catalog-country-group dans css/catalog.css) — c'est la troisième
page où il se manifeste, toujours parce que le JS ou le HTML
utilise <section> comme simple conteneur de contenu. */
.details-section{
padding:0;
}

/* ==========================================================
« VOTRE SITUATION FACE À CETTE BOURSE » (2026-08-31)
Bloc réservé aux abonnés. Volontairement SANS cadre appuyé ni fond
coloré : c'est une section de la fiche comme les autres, pas une
vitrine de fonctionnalité payante. Un visiteur ne la voit jamais —
elle reste `hidden` et details.js ne l'ouvre que pour un abonné.
========================================================== */
.situation-verdicts{
list-style:none;
margin:0 0 18px;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}

.situation-verdict{
font-size:.92rem;
line-height:1.5;
padding-left:18px;
position:relative;
color:var(--text-color);
}

/* Pastille de ton, jamais une icône : le sens passe par la couleur et
le texte. --tone-* et --danger-600 : voir css/base.css. */
.situation-verdict::before{
content:"";
position:absolute;
left:0;
top:.55em;
width:8px;
height:8px;
border-radius:50%;
background:var(--text-light);
}

.situation-verdict.is-favorable::before{ background:var(--success); }
.situation-verdict.is-defavorable::before{ background:var(--danger-600); }
.situation-verdict.is-invitation::before{ background:var(--amber-700); }

.situation-verdict.is-defavorable{ color:var(--danger-600); }

.situation-verdict a,
.situation-empty a,
.situation-notice a{
color:var(--amber-700);
font-weight:var(--fw-semibold);
text-decoration:underline;
}

.situation-reasons h3{
font-family:var(--font-display);
font-size:1rem;
font-weight:600;
margin:0 0 10px;
color:var(--text-color);
}

.situation-reasons ul{
margin:0 0 18px;
padding-left:20px;
display:flex;
flex-direction:column;
gap:6px;
font-size:.9rem;
line-height:1.55;
color:var(--text-light);
}

.situation-empty,
.situation-notice{
font-size:.9rem;
line-height:1.55;
color:var(--text-light);
margin:0 0 18px;
}

.situation-notice{ margin:14px 0 0; }

.situation-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

/* Note de limite d'âge (ageMaxNote) — texte secondaire sous la grille
« Informations clés » : ce qu'un nombre ne dit pas (limite qui varie
selon le candidat, cas général vs cas aménagés). */
.details-age-note{
margin-top:14px;
font-size:.88rem;
line-height:1.6;
color:var(--text-light);
}

.details-section h2{
font-family:var(--font-display);
font-weight:600;
font-size:var(--fs-h3);
letter-spacing:var(--ls-snug);
/* var(--text-color), pas --primary-dark : le fond de la page est un
token adaptatif qui devient sombre sous le shell authentifié
(dashboard.css) — --primary-dark ne l'est pas et restait sombre sur
fond devenu sombre pour un utilisateur connecté. */
color:var(--text-color);
margin-bottom:14px;
}

.details-section > p{
font-size:var(--fs-body);
line-height:var(--lh-relaxed);
color:var(--text-light);
}

.details-info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.details-info-item{
display:flex;
align-items:flex-start;
gap:12px;
background:var(--background);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:15px 17px;
box-shadow:var(--shadow-xs);
transition:border-color var(--transition);
}

.details-info-item:hover{ border-color:var(--amber-500); }

/* Gris neutre et non --primary-color : six icônes en bleu de marque
alignées sur deux colonnes coloraient la grille sans rien
distinguer — règle « Icônes » de DESIGN_SYSTEM.md, la couleur d'une
icône doit signifier quelque chose. Ici elles servent de repères,
pas de signaux : le sens est dans le libellé juste à côté. */
.details-info-item i,
.details-info-item svg{width:18px;height:18px;color:var(--text-muted);flex-shrink:0;margin-top:2px;}

.details-info-item span{display:block;font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:2px;}
.details-info-item strong{font-size:var(--fs-small);color:var(--text-color);font-weight:600;}

@media(max-width:640px){
.details-info-grid{grid-template-columns:1fr;}
}

/* Le bloc « Avant de candidater » (.diagnostic-*) a quitté la fiche avec le
lot VITRINE-COMMERCIALE (2026-09-11) : le diagnostic général suffit. */

/* ---------- Sidebar ---------- */

.details-sidebar{
position:sticky;
top:24px;
display:flex;
flex-direction:column;
gap:18px;
}

.cta-card{
border-radius:var(--radius-lg);
padding:26px 24px;
}

/* Palier "featured" — c'est la carte que la page veut pousser en
priorité (accompagnement payant) au-dessus de l'option autonome
juste en dessous ; --shadow-lg la fait peser davantage que
--shadow-md utilisé partout ailleurs sur cette page. */
/* Fond refait le 2026-08-22. C'était --gradient-primary, l'aplat bleu
que le reste du site a abandonné (hero, en-tête d'offers, pages
d'éligibilité) : sur une page devenue sombre-et-ambre, cette carte
restait le dernier grand bloc bleu vif, et elle attirait l'œil pour
la mauvaise raison — par sa couleur, pas par son message.
Même grammaire que l'en-tête d'offers.html : marine profond + éclat
ambré. La carte reste la plus lourde de la colonne (--shadow-lg,
c'est l'offre que la page pousse), mais elle appartient enfin à la
même page que le reste. */
.cta-card-primary{
background:
radial-gradient(ellipse 70% 80% at 84% 10%, rgba(233,163,25,.34) 0%, rgba(233,163,25,.10) 48%, transparent 72%),
linear-gradient(150deg, #342D24 0%, #211D18 46%, #14100D 100%);
border:1px solid rgba(233,163,25,.22);
color:#fff;
box-shadow:var(--shadow-lg);
}

.cta-card-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:rgba(255,255,255,.16);
padding:5px 12px;
border-radius:999px;
font-size:var(--fs-caption);
font-weight:700;
margin-bottom:14px;
}

/* var(--accent-color) (#7E71D8) recalculé (2026-08-13) : 1,04 à 2,74:1
selon la zone du dégradé de .cta-card-primary, très sous le seuil
non-texte (3:1) — l'icône en devenait quasiment invisible sur ce fond.
Blanc plein, comme le reste du contenu de cette carte : 5,86 à 17,8:1. */
/* --amber-500 tient 6,8:1 sur le nouveau fond marine de la carte (le
commentaire ci-dessus vaut pour l'ANCIEN fond bleu, où le violet
tombait à 1,04:1). Le libellé reste blanc ; seule l'icône est
colorée, comme partout ailleurs depuis la règle « Icônes ». */
.cta-card-badge i,
.cta-card-badge svg{width:13px;height:13px;color:var(--amber-500);}

.cta-card-primary h3{
font-family:var(--font-display);
font-weight:600;
font-size:var(--fs-h4);
margin-bottom:8px;
/* Sans ce color explicite, la règle globale h1-h6 (css/base.css) bat
le color:#fff hérité de .cta-card-primary — même bug que .cta-box. */
color:#fff;
}

.cta-card-primary p{
font-size:var(--fs-small);
opacity:.9;
line-height:var(--lh-relaxed);
margin-bottom:20px;
color:#fff;
}

.cta-card-primary .btn{width:100%;}

.cta-card-secondary{
background:var(--background);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
padding:22px 24px;
}

.cta-card-secondary > p:first-child{
font-size:var(--fs-small);
color:var(--text-muted);
margin-bottom:10px;
}

.portal-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 16px;
border:1px solid var(--border-color);
border-radius:12px;
color:var(--text-color);
font-weight:600;
font-size:var(--fs-small);
transition:var(--transition);
}

.portal-link:hover{border-color:var(--amber-500);color:var(--amber-700);}
.portal-link i,
.portal-link svg{width:16px;height:16px;flex-shrink:0;}

.portal-trust{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:14px;
font-size:var(--fs-caption);
color:var(--text-muted);
line-height:1.5;
}

/* Avertissement d'inéligibilité par nationalité (2026-08-30) — texte
seul, sans icône ni fond (règle « Icônes »), au-dessus des liens de
candidature qui restent tous actifs. --danger-600 : seule valeur
rouge admise pour du texte sur fond clair (mesure dans base.css). */
.portal-eligibility-warning{
margin:0 0 12px;
font-size:var(--fs-caption);
font-weight:var(--fw-semibold);
color:var(--danger-600);
line-height:1.5;
}

/* Même correctif que .diagnostic-checklist plus haut : var(--success)
tombe à 2,28:1 sur ce fond blanc (.cta-card-secondary), sous l'AA. */
.portal-trust i,
.portal-trust svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:#166534;}

@media(max-width:900px){

.details-body{grid-template-columns:1fr;}
.details-sidebar{position:static;}

}

/* ---------- Nudge de retour du portail ---------- */

.portal-nudge{
position:fixed;
bottom:24px;
right:24px;
left:auto;
z-index:900;
display:flex;
align-items:flex-start;
gap:14px;
max-width:380px;
background:var(--background);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
padding:20px 22px;
box-shadow:var(--shadow-lg);
animation:portal-nudge-in .4s var(--ease-premium);
}

@keyframes portal-nudge-in{
from{opacity:0;transform:translateY(12px);}
to{opacity:1;transform:translateY(0);}
}

.portal-nudge[hidden]{display:none;}

.portal-nudge-icon{
flex:0 0 auto;
width:36px;
height:36px;
border-radius:50%;
background:var(--background-light);
color:var(--primary-color);
display:flex;
align-items:center;
justify-content:center;
}

.portal-nudge-copy strong{display:block;font-size:var(--fs-small);color:var(--text-color);margin-bottom:3px;}
.portal-nudge-copy p{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.5;margin-bottom:12px;}

.portal-nudge-actions{display:flex;gap:8px;flex-wrap:wrap;}

.portal-nudge-close{
position:absolute;
top:10px;
right:10px;
width:24px;
height:24px;
border:none;
background:transparent;
color:var(--text-muted);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.portal-nudge-close:hover{color:var(--text-color);}

@media(max-width:480px){
.portal-nudge{left:16px;right:16px;max-width:none;}
}

/* La réserve de 118px protège le titre du header public fixe. Sur
petit écran le header est plus court et la bannière plus étroite :
la même réserve y mangeait un tiers de la hauteur utile. */
@media(max-width:720px){

.details-hero{ min-height:0; }

.details-hero-inner{ padding:96px 0 30px; }

}

/* ==========================================================
PHOTO DE VILLE ENTIÈRE SUR TÉLÉPHONE (2026-09-03)
==========================================================
Même raisonnement que pour les bannières du catalogue
(css/catalog-redesign.css, même date) : sur téléphone la photo de la
ville devient une bande pleine largeur à un ratio proche des photos
(16/10), fondue dans l'encre par le bas, et le titre vient dessous. */
@media (max-width:720px){

.details-hero{
display:block;
padding:84px 0 0;
background:linear-gradient(180deg,#1C1710 0%,#15100B 100%);
}

.details-hero-bg{
position:relative;
inset:auto;
display:block;
width:100%;
height:auto;
aspect-ratio:16/10;
transform:none;
/* Fondu long : le tiers bas de la photo se dissout dans l'encre, et
c'est là que se pose le texte — photo et informations forment un seul
bloc, comme au bureau. */
-webkit-mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.16) 84%,transparent 100%);
mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.16) 84%,transparent 100%);
}

.details-hero-overlay{ display:none; }

.details-hero-inner{ position:relative; margin-top:-84px; padding:0 0 28px; }
.details-hero h1, .details-hero-badge{ text-shadow:0 1px 2px rgba(13,10,6,.55); }

}

/* ==========================================================
   NOTE SOUS L'ÉCHÉANCE (2026-09-05)
   ==========================================================
   Ajoutée avec l'affichage honnête des cycles clos : la case
   « Informations clés » ne dit plus seulement une date, elle dit ce
   qu'on sait de sa fiabilité (« Les candidatures de ce cycle sont
   closes. Réouverture attendue : … », « Vérifié le 5 septembre
   2026 »). Volontairement discrète — c'est une précision, pas une
   alerte : la donner en rouge ferait fuir d'une bourse qui rouvre
   dans six semaines. */
.details-info-note {
display: block;
margin-top: 4px;
font-size: 0.78rem;
line-height: 1.45;
color: var(--text-muted, #6b6257);
}

.details-info-note a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}

/* Le statut reprend le ton calculé par etatCandidature() : un cycle
   clos ne doit pas s'afficher de la même encre qu'un cycle ouvert. */
#status[data-ton="close"] { color: var(--text-muted, #6b6257); }

/* Le texte d'origine du catalogue, sous l'état calculé. Détaché sur
   sa propre ligne et légèrement en retrait : c'est une citation de la
   base, pas une phrase de la page. */
.details-info-prose {
display: block;
margin-top: 6px;
padding-left: 10px;
border-left: 2px solid var(--border-color, #e5e1d9);
color: var(--text-muted, #6b6257);
}

/* ==========================================================
   COMMENT CETTE BOURSE SE DEMANDE (passe 3/3, 2026-09-06)
   ==========================================================
   Le champ `exigences` (99 bourses sur 156) trouve enfin un lecteur.
   Cinq formes, une seule qui change vraiment la démarche : la voie de
   dépôt, quand l'étudiant ne dépose pas lui-même (27 bourses).
   Libellés et explications viennent de js/exigences.js — jamais deux
   façons de dire la même exigence.
   ========================================================== */
.details-exigence{
padding:12px 0;
border-bottom:1px solid var(--border-color);
}
.details-exigence:last-child{border-bottom:none;padding-bottom:0;}
.details-exigence:first-child{padding-top:0;}

.details-exigence strong{
display:block;
margin-bottom:4px;
font-family:var(--font-display);
font-size:var(--fs-small);
color:var(--text-color);
}

.details-exigence p{
margin:0;
font-size:var(--fs-small);
color:var(--text-muted);
}

/* La voie de dépôt d'abord, et signalée : c'est elle qui décide de ce
   que l'étudiant doit surveiller. Ambre, jamais rouge — on informe. */
.details-exigence--voie{
padding:12px 14px;
margin-bottom:12px;
border:1px solid var(--amber-500);
border-bottom:1px solid var(--amber-500);
border-radius:var(--radius-sm);
background:var(--warning-50);
}
.details-exigence--voie strong{color:var(--amber-700);}
.details-exigence--voie p{color:var(--text-color);}