/* ============================================================ L'atelier en mode concours — l'habit, et rien d'autre. Chargee seulement quand l'adresse porte un concours. Les deux teintes viennent du JSON, posees en variables sur : la prochaine edition changera de couleur sans toucher a ce fichier. ============================================================ */ body.sk-concours { --sc-accent: #f97316; --sc-accent2: #a855f7; } /* Le fond du concours remplace la vue du jeu. Assombri deux fois : ce qui se pose dessus — des vignettes de personnages — doit rester lisible. */ body.sk-concours::before { background: radial-gradient(1600px 1000px at 50% 0%, rgba(8, 10, 26, .40) 0%, rgba(6, 8, 19, .62) 72%), var(--sc-fond, url('../fond-vitre.webp')) center / cover no-repeat; } /* ── Les toiles ────────────────────────────────────────────────────────── Quatre coins, en SVG pose en fond : aucune balise ajoutee, donc rien qui puisse intercepter un clic ni deranger la mise en page du cadre. */ body.sk-concours::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-repeat: no-repeat; /* Les deux coins du haut seulement : une toile pend, elle ne pousse pas du sol. */ background-position: left top, right top; background-size: 230px 230px, 180px 180px; background-image: var(--sc-toile), var(--sc-toile-miroir); } /* La toile : des arcs entre des rayons, dessines une fois et reutilises aux quatre coins. La seconde est la meme, retournee. */ body.sk-concours { --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='.5'%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='.5' 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"); } /* ── Les teintes de l'interface ────────────────────────────────────────── Les panneaux gardent leur forme ; seuls les bords et les accents virent a l'orange et au violet. */ body.sk-concours .sk-bloc, body.sk-concours .sk-colonne > section { border-color: color-mix(in srgb, var(--sc-accent) 24%, var(--bord)); } body.sk-concours .sk-sauver, body.sk-concours .sk-bouton-vert { border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent); background: linear-gradient(180deg, var(--sc-accent) 0%, color-mix(in srgb, var(--sc-accent2) 60%, #6b1fa8) 100%); } body.sk-concours ::selection { background: color-mix(in srgb, var(--sc-accent2) 60%, transparent); } body.sk-concours .sk-emplacement.actif { border-color: var(--sc-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--sc-accent) 45%, transparent); } /* ── Le costume interdit ───────────────────────────────────────────────── Barre d'une croix, toujours visible : l'effacer aurait laisse croire a un bogue. Le clic ne fait rien d'autre que le dire. */ body.sk-concours .sk-emplacement.sk-interdit { position: relative; cursor: not-allowed; filter: grayscale(1) brightness(.6); } body.sk-concours .sk-emplacement.sk-interdit::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom right, transparent calc(50% - 1.4px), #ef4444 calc(50% - 1.4px), #ef4444 calc(50% + 1.4px), transparent calc(50% + 1.4px)), linear-gradient(to bottom left, transparent calc(50% - 1.4px), #ef4444 calc(50% - 1.4px), #ef4444 calc(50% + 1.4px), transparent calc(50% + 1.4px)); } /* L'eclat rouge du refus. */ body.sk-concours .sk-refus { animation: sk-refus 560ms ease-out; } @keyframes sk-refus { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .85); transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); transform: translateX(0); } } /* ── La phrase du refus ────────────────────────────────────────────────── Au centre, au-dessus de tout : le cadre de l'atelier est mis a l'echelle par « zoom », d'ou une position fixe et un z-index tres haut. */ #sk-concours-refus { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -8px); z-index: 99999; pointer-events: none; opacity: 0; padding: 15px 28px; border-radius: 14px; font: 700 19px/1.3 'Rajdhani', 'Segoe UI', system-ui, sans-serif; text-align: center; color: #fff; border: 1px solid #ef4444; background: linear-gradient(180deg, rgba(120, 20, 20, .96), rgba(40, 8, 14, .96)); box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(239, 68, 68, .35); transition: opacity 160ms ease, transform 160ms ease; } #sk-concours-refus.visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { body.sk-concours .sk-refus { animation: none; } #sk-concours-refus { transition: none; } } /* L'onglet actif de la navigation : vert dans l'atelier ordinaire, aux couleurs du concours ici. Le libelle dit deja « Concours » ; la teinte evite qu'on s'y trompe d'un coup d'oeil. */ body.sk-concours .sf-nav a.sk-nav-concours { color: var(--sc-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--sc-accent) 55%, transparent); } body.sk-concours .sf-nav a.sk-nav-concours::after { background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent2)); box-shadow: 0 0 12px color-mix(in srgb, var(--sc-accent) 60%, transparent); } /* ── Le rappel, dans le bandeau ────────────────────────────────────────── A droite, avant le coin du compte. Il ne prend aucune hauteur : le bandeau en a deja 80, figes, et la zone de travail se calcule dessus. */ body.sk-concours .sf-compte { margin-left: 0; } .sk-concours-coin { display: flex; align-items: center; gap: 9px; /* Colle au coin du compte, a droite : c'est ce « auto » qui pousse le couple vers la droite, et celui du compte qui a ete neutralise. */ margin-left: auto; max-width: 30vw; overflow: hidden; padding: 5px 6px 5px 13px; border-radius: 999px; font-size: 13px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--sc-accent) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--sc-accent) 20%, transparent), color-mix(in srgb, var(--sc-accent2) 18%, transparent)); } .sk-concours-coin strong { color: var(--sc-accent); letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; } .sk-concours-coin .sk-concours-etoile { color: var(--sc-accent); } .sk-concours-coin button { padding: 4px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #0e1014; border: 0; background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent2)); } .sk-concours-coin button:hover { filter: brightness(1.12); } /* L'etat de la palette : rouge tant qu'il manque une couleur. */ #sk-concours-etat { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fecaca; border: 1px solid rgba(239, 68, 68, .5); background: rgba(70, 12, 12, .75); } #sk-concours-etat.ok { color: #bbf7d0; border-color: rgba(34, 197, 94, .5); background: rgba(8, 50, 26, .75); } /* ── La modale des regles ──────────────────────────────────────────────── Un