/* ==========================================================================

   STYLE X1000 - ROUTEUR VIRTUEL & INTERFACE CLASH OF CLANS

   ========================================================================== */



/* Cursor personnalisé (Épée/Pointeur Doré) */

body.custom-cursor { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23facc15" stroke="black" stroke-width="2"><polygon points="3,3 10,21 14,14 21,10"/></svg>') 0 0, auto; }



/* Backgrounds & Textures */

.bg-texture { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E"); background-attachment: fixed; }

.coc-panel { background: #171c23; border: 4px solid #5c3a21; border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.6); }



/* Typography CoC */

.text-stroke { -webkit-text-stroke: 1px black; text-shadow: 0 4px 4px rgba(0,0,0,0.9); }

.text-stroke-sm { -webkit-text-stroke: 0.5px black; text-shadow: 0 2px 2px rgba(0,0,0,0.9); }

.text-stroke-lg { -webkit-text-stroke: 2px black; text-shadow: 0 8px 10px rgba(0,0,0,0.9); }

.text-shadow-epic { text-shadow: 0 4px 4px rgba(0,0,0,0.9), 0 10px 20px rgba(0,0,0,0.8); }



/* Shadows */

.shadow-glow-gold { box-shadow: 0 0 20px rgba(250, 204, 21, 0.6); }

.shadow-glow-red { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }

.shadow-glow-green { box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }

.shadow-glow-elixir { box-shadow: 0 0 20px rgba(217, 70, 239, 0.6); }

.shadow-inner-dark { box-shadow: inset 0 4px 10px rgba(0,0,0,0.8); }



/* Boutons 3D CoC */

.btn-coc { position: relative; border: none; color: white; cursor: pointer; transition: all 0.1s ease; text-transform: uppercase; letter-spacing: 1px; }

.btn-coc-gold { background: linear-gradient(to bottom, #fde047, #b45309); color: white; box-shadow: 0 6px 0 #78350f, 0 10px 15px rgba(0,0,0,0.4); border: 2px solid #fef08a; }

.btn-coc-gold:active { transform: translateY(6px); box-shadow: 0 0 0 #78350f; }

.btn-coc-green { background: linear-gradient(to bottom, #4ade80, #15803d); color: white; box-shadow: 0 6px 0 #14532d, 0 10px 15px rgba(0,0,0,0.4); border: 2px solid #86efac; }

.btn-coc-green:active { transform: translateY(6px); box-shadow: 0 0 0 #14532d; }

.btn-coc-red { background: linear-gradient(to bottom, #ef4444, #991b1b); color: white; box-shadow: 0 6px 0 #7f1d1d, 0 10px 15px rgba(0,0,0,0.4); border: 2px solid #fca5a5; }

.btn-coc-red:active { transform: translateY(6px); box-shadow: 0 0 0 #7f1d1d; }

.btn-coc-dark { background: linear-gradient(to bottom, #475569, #1e293b); color: white; box-shadow: 0 6px 0 #0f172a, 0 10px 15px rgba(0,0,0,0.5); border: 2px solid #94a3b8; }

.btn-coc-dark:active { transform: translateY(6px); box-shadow: 0 0 0 #0f172a; }

.btn-coc-dark.active { background: linear-gradient(to bottom, #facc15, #b45309); color: white; box-shadow: 0 6px 0 #78350f; border: 2px solid #fef08a; }



/* Cards Hover */

.compo-card, .vid-card { perspective: 1000px; }

.card-inner { background: #171c23; border: 4px solid #5c3a21; border-radius: 16px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.6); }

.compo-card:hover .card-inner, .vid-card:hover .card-inner { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.9), 0 0 30px rgba(250,204,21,0.2); border-color: #facc15; }

.card-img { transition: transform 0.7s; }

.compo-card:hover .card-img, .vid-card:hover .card-img { transform: scale(1.08); }



/* Animations */

@keyframes blob { 0%, 100% { transform: translate(0px, 0px) scale(1); } 50% { transform: translate(30px, -50px) scale(1.1); } }

.animate-blob { animation: blob 8s infinite ease-in-out; }

.animation-delay-2000 { animation-delay: 2s; }

@keyframes slow-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }

.animate-slow-zoom { animation: slow-zoom 25s infinite alternate linear; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.animate-float { animation: float 4s ease-in-out infinite; }



/* SPA FADE TRANSITIONS (SANS BUG DE HAUTEUR) */

.app-page { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }

.app-page.fade-out { opacity: 0; transform: scale(0.98); pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; }

.app-page.fade-in { opacity: 1; transform: scale(1); pointer-events: auto; position: relative; }



/* Scroll Animations */

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1); }

.reveal.active { opacity: 1; transform: translateY(0); }



/* Custom Scrollbar (Style Bois & Or) */

::-webkit-scrollbar { width: 12px; }

::-webkit-scrollbar-track { background: #111827; border-left: 2px solid #3a2318; }

::-webkit-scrollbar-thumb { background: #5c3a21; border: 2px solid #facc15; border-radius: 6px; }

::-webkit-scrollbar-thumb:hover { background: #b45309; }

:focus-visible { outline: 3px solid #facc15; outline-offset: 5px; }

.skip-link { position:fixed; top:8px; left:8px; z-index:2000; padding:12px 20px; background:#facc15; color:#111827; border-radius:8px; transform:translateY(-160%); }

.skip-link:focus { transform:translateY(0); }

button:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }

  .reveal { opacity:1 !important; transform:none !important; }

}



html[data-seo-page] .reveal { opacity:1; transform:none; }

a.btn-coc { text-decoration:none; }


#loader[hidden] {display:none !important;}
.seo-guide h2 {font-family:"Carter One",sans-serif;font-size:1.5rem;color:#facc15;margin:1.5rem 0 1rem;}
.seo-guide p {margin-bottom:1rem;}
.seo-guide a {color:#facc15;text-decoration:underline;text-underline-offset:3px;}