/* ============================================================
   Skin'Fû — habit d'une page de concours

   La page reprend la grille du profil ; seule la couleur change.
   Les deux teintes viennent du JSON du concours, posees en
   variables sur <body> : changer de theme ne demande pas de CSS.
   ============================================================ */

.sc-corps {
    --sc-accent:  #f97316;
    --sc-accent2: #a855f7;
    --sc-fond: none;
}

/* Une lueur des deux teintes derriere toute la page. Le fond image,
   quand il y en a un, se pose par-dessus et reste discret : les
   vignettes des skins doivent rester lisibles. */
.sc-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* Le decor de la page. profil.css pose deja ce calque avec la vue du jeu ;
   on le reprend plutot que d'en empiler un second, qui serait passe dessous
   sans jamais se voir. Le voile sombre est dans la meme pile, au-dessus de
   l'image : les vignettes des skins doivent rester lisibles. */
.sc-corps::before {
    background:
        linear-gradient(180deg, rgba(8, 10, 26, .40) 0%, rgba(6, 8, 19, .62) 100%),
        var(--sc-fond, url('../fond-vitre.webp')) center / cover no-repeat;
}

/* ── Le bandeau du theme ───────────────────────────────────────────── */
.sc-entete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 28px;
    align-items: start;
    margin: 0 0 26px;
    padding: 26px 28px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 34%, transparent);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--sc-accent) 13%, #0e1014) 0%,
        color-mix(in srgb, var(--sc-accent2) 11%, #0e1014) 100%);
    box-shadow: 0 0 44px color-mix(in srgb, var(--sc-accent) 18%, transparent);
}

.sc-surtitre {
    margin: 0 0 6px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sc-accent);
}
.sc-titre {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.1;
    color: #f1f5f9;
}
.sc-accroche {
    margin: 0 0 14px;
    max-width: 62ch;
    color: #cbd5e1;
    line-height: 1.55;
}
.sc-lot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    color: #0e1014;
    background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent2));
}
.sc-dates { margin: 0 0 18px; font-size: 13px; color: #94a3b8; }
.sc-dates em { color: var(--sc-accent); font-style: normal; }

.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sc-bouton {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #0e1014;
    background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent2));
    box-shadow: 0 6px 22px color-mix(in srgb, var(--sc-accent) 32%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sc-bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--sc-accent) 44%, transparent);
}
/* Avant l'ouverture : la meme forme, mais elle n'invite plus au clic. */
.sc-bouton-eteint {
    background: #1e293b;
    color: #94a3b8;
    box-shadow: none;
    cursor: default;
}
.sc-bouton-eteint:hover { transform: none; box-shadow: none; }
.sc-lien { color: #94a3b8; font-size: 14px; }
.sc-lien:hover { color: var(--sc-accent); }

/* ── Les regles ────────────────────────────────────────────────────── */
.sc-regles {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(14, 16, 20, .62);
}
.sc-regles h2 {
    margin: 0 0 10px;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sc-accent);
}
.sc-regles ul { margin: 0; padding: 0 0 0 18px; color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.sc-regles li::marker { color: var(--sc-accent2); }
.sc-regles-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #1e293b;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

/* ── La barre des participations ───────────────────────────────────── */
.sc-barre { align-items: center; }
.sc-sous-titre { margin: 0; font-size: 20px; color: #f1f5f9; }
.sc-sous-titre span { color: var(--sc-accent); font-size: 15px; }
.sc-barre .sp-tri.actif {
    border-color: color-mix(in srgb, var(--sc-accent) 60%, transparent);
    color: var(--sc-accent);
}
.sc-auteur-lien {
    background: none; border: 0; padding: 0;
    font: inherit; color: inherit; cursor: pointer;
}
.sc-auteur-lien:hover { color: var(--sc-accent); text-decoration: underline; }

/* L'entree du concours dans la navigation se distingue des autres. */
.sc-lien-nav { color: var(--sc-accent, #f97316) !important; }

@media (max-width: 900px) {
    .sc-entete { grid-template-columns: 1fr; padding: 20px; }
    .sc-titre { font-size: 26px; }
}

/* ── Le partage du lot ───────────────────────────────────────────────────
   La pastille annonce le total ; ces trois lignes disent qui prend quoi. */
.sc-marches {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 14px; padding: 0;
    font-size: 13.5px; color: #cbd5e1;
}
.sc-marches li {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 30%, transparent);
    background: rgba(14, 16, 20, .55);
}
.sc-rang {
    display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 11.5px; font-weight: 800; color: #0e1014;
    background: linear-gradient(135deg, var(--sc-accent), var(--sc-accent2));
}
/* Le rappel que la page n'est pas encore publique. */
.sc-avant-heure {
    font-size: 12.5px; font-style: italic; color: var(--sc-accent);
}

/* ── Les toiles ──────────────────────────────────────────────────────────
   Deux coins du haut, en fond : rien qui puisse intercepter un clic. */
.sc-page::before {
    background-image: var(--sc-toile), var(--sc-toile-miroir);
    background-repeat: no-repeat;
    background-position: left top, right top;
    background-size: 250px 250px, 200px 200px;
}
.sc-corps {
    --sc-toile: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e8d8ff' stroke-width='.9' stroke-opacity='.45'%3E%3Cpath d='M0 0 L100 0 M0 0 L86 50 M0 0 L50 86 M0 0 L0 100 M0 0 L70 70 M0 0 L26 97 M0 0 L97 26'/%3E%3Cpath d='M18 0 A18 18 0 0 1 0 18 M32 0 A32 32 0 0 1 0 32 M48 0 A48 48 0 0 1 0 48 M66 0 A66 66 0 0 1 0 66 M86 0 A86 86 0 0 1 0 86'/%3E%3C/g%3E%3C/svg%3E");
    --sc-toile-miroir: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e8d8ff' stroke-width='.9' stroke-opacity='.45' transform='translate(100,0) scale(-1,1)'%3E%3Cpath d='M0 0 L100 0 M0 0 L86 50 M0 0 L50 86 M0 0 L0 100 M0 0 L70 70 M0 0 L26 97 M0 0 L97 26'/%3E%3Cpath d='M18 0 A18 18 0 0 1 0 18 M32 0 A32 32 0 0 1 0 32 M48 0 A48 48 0 0 1 0 48 M66 0 A66 66 0 0 1 0 66 M86 0 A86 86 0 0 1 0 86'/%3E%3C/g%3E%3C/svg%3E");
}

/* Une toile posee sur le cadre du theme, plus petite, dans son coin. */
.sc-entete { position: relative; overflow: hidden; }
.sc-entete::before {
    content: '';
    position: absolute; right: 0; top: 0;
    width: 150px; height: 150px;
    pointer-events: none;
    opacity: .5;
    background: var(--sc-toile-miroir) right top / contain no-repeat;
}
/* La toile du cadre est peinte apres le contenu : sans cette couche, elle
   serait passee par-dessus le texte des regles. */
.sc-entete-texte, .sc-regles { position: relative; z-index: 1; }

/* ── Le « j'aime » du concours ───────────────────────────────────────────
   Le bouton reste celui de aime.js : meme compteur, meme requete, meme
   reprise si le serveur refuse. Seules la figure et la teinte changent —
   une chauve-souris, aux couleurs du concours plutot qu'au rose. */
.sc-aime {
    color: var(--sc-accent);
    border-color: color-mix(in srgb, var(--sc-accent) 40%, transparent);
    background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
}
.sc-aime:hover {
    border-color: var(--sc-accent);
    background: color-mix(in srgb, var(--sc-accent) 20%, transparent);
}
.sc-aime.actif {
    color: #0e1014;
    border-color: color-mix(in srgb, var(--sc-accent) 70%, transparent);
    background: linear-gradient(180deg, var(--sc-accent), var(--sc-accent2));
}
.sc-chauve-souris {
    display: block;
    width: 17px; height: 17px;
    fill: currentColor;
}
/* Le battement de aime.js porte sur le span : la chauve-souris le suit,
   elle bat des ailes plutot que de pulser. */
/* Le pulse du coeur est neutralise : sans cela deux animations se
   superposaient sur la meme figure. */
.sc-aime .sf-aime-coeur { display: flex; }
.sc-aime.bat .sf-aime-coeur { animation: none; }
.sc-aime.bat .sc-chauve-souris { animation: sc-vol 320ms ease; }
@keyframes sc-vol {
    0%   { transform: scaleX(1)   scaleY(1); }
    40%  { transform: scaleX(.55) scaleY(1.2); }
    70%  { transform: scaleX(1.1) scaleY(.95); }
    100% { transform: scaleX(1)   scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .sc-aime.bat .sc-chauve-souris { animation: none; }
}

/* ── Les votes ne se comptent pas en public ──────────────────────────────
   Pendant un concours, afficher le score oriente le vote : on soutient ce
   qui mene, ou l'on renonce a soutenir ce qui traine. Le serveur ne rend
   donc aucun total tant qu'il court, et le bouton montre un « ? ». Le
   bouton garde son etat : on voit toujours si l'on a vote. */
.sc-aime.sf-aime-muet .sf-aime-n {
    display: inline-block;
    width: 1.4ch;
    text-align: center;
    opacity: .75;
    user-select: none;
}
.sc-aime { cursor: pointer; }