/* Classement "Ils ont tourné" - page dédiée + widget sidebar.
   Palette et gabarit repris du design fourni (Classement Desktop/Mobile). */
:root {
    --classement-bg: #050506;
    --classement-card-border: #24242a;
    --classement-red: #e0242c;
    --classement-red-hover: #ff4a52;
    --classement-text: #f4f4f6;
    --classement-text-2: #e9e9ee;
    --classement-text-3: #f0f0f4;
    --classement-muted: #8f8f96;
    --classement-muted-2: #b9b9c0;
    --classement-muted-3: #7d7d85;
    --classement-row-border: #1d1d22;
    --classement-row-hover: #141418;
    --classement-podium-border: #3d2f18;
    --classement-gold: #f5a623;
    --classement-avatar-bg: #26262c;
    --classement-avatar-text: #6d6d75;
    --classement-shoots: #ef4444;
    --classement-btn-border: #3a3a42;
}

.classementCasting,
.classementWidget {
    position: relative;
    -webkit-font-smoothing: antialiased;
    /* background: radial-gradient(90% 120% at 88% 0%, #2a1811 0%, #121214 42%, #0b0b0d 100%); */
    border: 1px solid var(--classement-card-border);
    border-radius: 18px;
    padding: 30px 34px 30px;
    color: var(--classement-text-2);
    overflow: hidden;
}

.classementWidget {
    padding: 26px 20px 24px;
}
.classementCasting::after,
.classementWidget::after {
    content:'';
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    background: radial-gradient(120% 60% at 85% 0%, #241610 0%, #101012 45%, #0b0b0d 100%);

}
.classementCasting::before,
.classementWidget::before {
    content: '';
    position: absolute;
    right:0;
    top:0;
    width: 100%;
    height:100%;
    background: url(img/classement/back_header.webp) top/contain no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index:0;
    opacity:0.56;
}

/* Header */
.classementHeader {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0;
}

.classementHeader--compact {
    gap: 12px;
}

.classementLaurel {
    flex: none;
    width: 104px;
    margin-top: 4px;
}

.classementHeader--compact .classementLaurel {
    width: 72px;
}

.classementHeaderText {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.classementHeader h2,
.classementHeader h3 {
    margin: 0;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--classement-text);
    text-transform: uppercase;
}

.classementHeader h3 {
    font-size: 26px;
}

.classementHeader .classementAccent {
    color: var(--classement-red);
}

.classementSubtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--classement-muted);
}

/* Tabs */
.classementTabs {
    position: relative;
    display: flex;
    gap: 30px;
    padding-top: 22px;
    margin-top: 22px;
}

/* Trait dégradé plutôt qu'une bordure pleine : une ligne nette qui traverse
   le visuel de fond donnait une impression de glitch (retour client). Le
   dégradé s'estompe vers la droite, là où le décor de fond est le plus
   présent (radial-gradient/bobine ancrés en haut à droite). */
.classementTabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    /* Fondu bien plus court (retour client 2026-09-01) : transparent dès
       25% plutôt qu'un dégradé étiré sur toute la largeur. */
    background: linear-gradient(to right, var(--classement-row-border) 0%, transparent 75%);
}

.classementTab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 11px;
    margin-bottom: -1px;
    color: var(--classement-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.classementTab.is-active {
    color: var(--classement-red);
    font-weight: 600;
    border-bottom: 2px solid var(--classement-red);
}

.classementTabIcon {
    width: 17px;
    height: 17px;
    display: inline-block;
    background-color: currentColor;
}

.classementTabIcon--trophy {
    mask: url(img/classement/trophy-small.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/trophy-small.svg) center/contain no-repeat;
}

.classementTabIcon--friends {
    mask: url(img/classement/icon-friends.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/icon-friends.svg) center/contain no-repeat;
}


/* Podium */
.classementPodium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 24px;
}

.classementPodium--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.classementPodiumCard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 16px 14px;
    min-width: 0;
    background: linear-gradient(180deg, #17171b, #121215);
    border: 1px solid var(--classement-podium-border);
    border-radius: 14px;
}

.classementMedal {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 26px;
    height: 31px;
}

.classementMedal--gold {
    background: url(img/classement/medal-gold.svg) center/contain no-repeat;
}

.classementMedal--silver {
    background: url(img/classement/medal-silver.svg) center/contain no-repeat;
}

.classementMedal--bronze {
    background: url(img/classement/medal-bronze.svg) center/contain no-repeat;
}

.classementAvatarInitial {
    flex: none;
    width: 62px;
    height: 62px;
    margin-top: 14px;
    border-radius: 50%;
    border: 2px solid #c8912b;
    background: var(--classement-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--classement-avatar-text);
}

/* Rangs 4+ agrandis (retour client 2026-09-01 : les photos du "reste du
   listing" étaient trop petites) - de 26px à 44px, même taille que la photo
   réelle .classementAvatarPhoto--small pour rester cohérent qu'il y ait une
   photo ou non. */
.classementAvatarInitial--small {
    width: 44px;
    height: 44px;
    margin-top: 0;
    border: none;
    font-size: 16px;
}

/* Photo de profil réelle (voir Classement::getAvatarUrls()) - repli sur
   .classementAvatarInitial ci-dessus si le figurant n'en a pas. */
.classementAvatarPhoto {
    flex: none;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.classementAvatarPhoto--large {
    width: 62px;
    height: 62px;
    margin-top: 14px;
    border: 2px solid #c8912b;
}

.classementAvatarPhoto--small {
    width: 44px;
    height: 44px;
}

.classementPodiumBody {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 10px;
}

/* Nom et prénom en entier partout (retour client 2026-09-01, avant réduit à
   une initiale) - retour à la ligne autorisé plutôt qu'une troncature en
   ellipsis, et overflow-wrap pour ne jamais laisser un nom très long/sans
   espace déborder de sa colonne. */
.classementName,
.classementRowName {
    font-weight: 700;
    font-size: 15px;
    color: var(--classement-text);
    white-space: normal;
    overflow-wrap: break-word;
}

.classementRowName {
    font-weight: 600;
    font-size: 13px;
    color: var(--classement-text-2);
}

.classementStars {
    position: relative;
    display: inline-flex;
    gap: 2px;
}

.classementStar {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: var(--classement-gold);
}

.classementRow .classementStar {
    width: 11px;
    height: 11px;
}

.classementStar--full {
    mask: url(img/classement/icon-star-full.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/icon-star-full.svg) center/contain no-repeat;
}

.classementStar--half {
    mask: url(img/classement/icon-star-half.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/icon-star-half.svg) center/contain no-repeat;
}

.classementStar--empty {
    mask: url(img/classement/icon-star-empty.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/icon-star-empty.svg) center/contain no-repeat;
}

/* Nombre de tournages mis en avant (retour client 2026-09-01) - l'info
   principale du classement, remplace l'ancien petit texte "N castings
   retenus" (à droite, peu visible). Placé au-dessus du prénom/nom par les
   templates (podium-card.php, row.php). Icône+chiffre au-dessus, libellé
   sur sa propre ligne en dessous plutôt que tout aligné horizontalement -
   "TOURNAGES À SON ACTIF" en majuscules débordait des cartes du podium en
   colonne étroite (widget en sidebar 3/12, cf. retour client). */
.classementTournagesCount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.classementTournagesTop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.classementTournagesTop::before {
    content: '';
    flex: none;
    width: 24px;
    height: 24px;
    background: url(img/classement/icon-clapperboard.svg) center/contain no-repeat;
}

.classementTournagesNumber {
    font-size: 32px;
    font-weight: 800;
    color: var(--classement-red);
}

.classementTournagesLabel {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--classement-muted-2);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: normal;
    overflow-wrap: break-word;
}

.classementRow .classementTournagesTop {
    gap: 6px;
}

.classementRow .classementTournagesTop::before {
    width: 18px;
    height: 18px;
}

.classementRow .classementTournagesNumber {
    font-size: 22px;
}

.classementRow .classementTournagesLabel {
    font-size: 9.5px;
}

.classementProfileBtn {
    margin-top: 5px;
    align-self: flex-start;
    padding: 6px 14px;
    background: #1f1f25;
    border: 1px solid var(--classement-btn-border);
    border-radius: 7px;
    color: var(--classement-text-2);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.classementProfileBtn:hover {
    border-color: var(--classement-red);
    color: #fff;
}

/* Liste (rang 4+) */
.classementList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    padding-top: 26px;
}

.classementList--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.classementRow {
    display: grid;
    grid-template-columns: 20px 44px minmax(0, 1fr) 16px;
    grid-template-areas: "rank avatar content chevron";
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    border-top: 1px solid var(--classement-row-border);
    text-decoration: none;
}

/* display:grid ci-dessus est une règle "auteur" qui prime sur le
   [hidden]{display:none} du navigateur (même sans !important, une règle
   auteur bat toujours une règle user-agent) - sans ce override explicite,
   l'attribut hidden posé par js/classement.js n'aurait aucun effet visuel. */
.classementRow[hidden] {
    display: none;
}

.classementRow > .classementRankNumber {
    grid-area: rank;
}

.classementRow > .classementAvatarInitial,
.classementRow > .classementAvatarPhoto {
    grid-area: avatar;
}

.classementRow > .classementRowContent {
    grid-area: content;
}

.classementRow > .classementChevron {
    grid-area: chevron;
}

/* Widget sidebar (rang 4+) : pas de chevron/lien profil (voir $context ===
   'widget' dans templates/classement/row.php). */
.classementList--compact .classementRow {
    grid-template-columns: 20px 44px minmax(0, 1fr);
    grid-template-areas: "rank avatar content";
}

.classementRow:hover {
    background: var(--classement-row-hover);
}

.classementRankNumber {
    font-size: 16px;
    color: var(--classement-muted);
    text-align: center;
}

.classementChevron {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: #5c5c65;
    mask: url(img/classement/icon-chevron-right.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/icon-chevron-right.svg) center/contain no-repeat;
}

/* CTA */
.classementCta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    padding: 12px 26px;
    background: transparent;
    border: 1px solid var(--classement-btn-border);
    border-radius: 9px;
    color: var(--classement-text-3);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.classementCta:hover {
    border-color: var(--classement-red);
    color: #fff;
}

.classementCtaIcon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: var(--classement-red);
    mask: url(img/classement/trophy-small.svg) center/contain no-repeat;
    -webkit-mask: url(img/classement/trophy-small.svg) center/contain no-repeat;
}

.classementEmpty {
    text-align: center;
    color: var(--classement-muted);
    padding: 24px 0;
}

/* "Voir la suite" - révèle les rangs suivants déjà présents dans le DOM
   (voir js/classement.js), même langage visuel que .classementCta. */
.classementLoadMore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
    padding: 12px 26px;
    background: transparent;
    border: 1px solid var(--classement-btn-border);
    border-radius: 9px;
    color: var(--classement-text-3);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.classementLoadMore:hover {
    border-color: var(--classement-red);
    color: #fff;
}

.classementLoadMore[hidden] {
    display: none;
}

/* Mini-liste des derniers tournages retenus + déclencheur de la popin
   complète (voir templates/classement/last-retenus.php, js/classement.js) */
.classementLastRetenus {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 100%;
}

.classementLastRetenusLabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--classement-muted-2);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.classementLastRetenusList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.classementLastRetenusItem {
    display: flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
}

.classementLastRetenusItemProject {
    /* min-width:0 nécessaire pour que l'ellipsis s'applique réellement dans
       un enfant flex (sinon la piste reprend sa taille min-content). Classe
       partagée par <a> (casting encore en ligne) et <span> (casting
       supprimé - pas de lien mort, voir Classement::getRetenusDetail()). */
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--classement-red);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.classementLastRetenusItemProject:hover {
    text-decoration: underline;
}

.classementLastRetenusItemAnnee {
    flex: none;
    color: var(--classement-muted-2);
    font-size: 11px;
}

.classementVoirListe {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--classement-muted-2);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.classementVoirListe:hover {
    color: #fff;
}

.classementRowContent {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.classementLastRetenus--row .classementLastRetenusLabel,
.classementLastRetenus--row .classementVoirListe {
    font-size: 10px;
}

.classementLastRetenus--row .classementLastRetenusItem {
    font-size: 10.5px;
}

.classementLastRetenus--row .classementLastRetenusItemAnnee {
    font-size: 10px;
}

/* Réseaux sociaux (retour client 2026-09-01, voir Classement::getSocialLinks()) */
.classementSocials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.classementSocials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1f1f25;
    border: 1px solid var(--classement-btn-border);
    color: var(--classement-muted-2);
    font-size: 11px;
    text-decoration: none;
}

.classementSocials a:hover {
    border-color: var(--classement-red);
    color: #fff;
}

.classementRow .classementSocials a {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

/* Popin liste complète des tournages retenus */
.classementModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 5, 6, .78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
}

.classementModalOverlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.classementModalOpen {
    overflow: hidden;
}

.classementModal {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px 26px 26px;
    background: linear-gradient(180deg, #17171b, #121215);
    border: 1px solid var(--classement-card-border);
    border-radius: 16px;
}

.classementModalClose {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #1f1f25;
    border: 1px solid var(--classement-btn-border);
    border-radius: 50%;
    cursor: pointer;
}

.classementModalClose::before,
.classementModalClose::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: var(--classement-muted-2);
    transform-origin: center;
}

.classementModalClose::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.classementModalClose::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.classementModalClose:hover::before,
.classementModalClose:hover::after {
    background: #fff;
}

.classementModalTitle {
    margin: 0 30px 16px 0;
    font-weight: 700;
    font-size: 22px;
    color: var(--classement-text);
    text-transform: uppercase;
}

.classementModalList {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classementModalItem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--classement-row-border);
}

.classementModalItem:first-child {
    border-top: none;
}

.classementModalItemInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.classementModalItemProject {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--classement-text-2);
}

/* Année du casting (voir Classement::getRetenusDetail()) - remplace depuis
   le 2026-09-08 la date complète + le lieu affichés jusque-là dans la popin. */
.classementModalItemDate {
    font-size: 11.5px;
    color: var(--classement-muted);
}

.classementModalItemLink {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--classement-red);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.classementModalItemLink:hover {
    color: var(--classement-red-hover);
}

@media (max-width: 767px) {
    /* minmax(0, 1fr) et pas 1fr seul : sans le minimum à 0 explicite, la
       piste reprend la taille "min-content" du contenu (le bouton "a été
       retenu sur…" en nowrap notamment), ce qui faisait déborder
       .classementPodiumCard / .classementRow de leur colonne sur mobile. */
    .classementPodium,
    .classementList {
        grid-template-columns: minmax(0, 1fr);
    }

    .classementCasting {
        padding: 26px 20px 26px;
    }
}