/*
Theme Name:   UFO Trésor
Theme URI:    https://ingenieuria.com
Description:  Thème enfant de Storefront pour une chasse au trésor techno-historique et sci-fi : nuit étoilée, néons verts, lumières de soucoupe. Sombre mais joyeux. Compatible WooCommerce.
Author:       Alain Le Gall
Template:     storefront
Version:      1.0.0
Requires at least: 6.1
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  ufo-tresor
*/

/* =========================================================
   0. Polices (hébergées localement : rien n'est chargé chez Google)
   ========================================================= */
@font-face { font-family: "Orbitron"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/orbitron-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/exo-2-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/exo-2-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/exo-2-latin-700-normal.woff2") format("woff2"); }

/* =========================================================
   1. Palette — modifie ici pour changer toute l'ambiance
   ========================================================= */
:root {
	--ufo-nuit:        #0a0e22;  /* fond principal          */
	--ufo-nuit-2:      #12183a;  /* panneaux, cartes        */
	--ufo-nuit-3:      #1c2452;  /* survols, bordures       */
	--ufo-texte:       #dfe6ff;  /* texte courant           */
	--ufo-texte-doux:  #9aa6d4;  /* texte secondaire        */
	--ufo-vert:        #39ff9f;  /* néon principal (rayon)  */
	--ufo-vert-sombre: #12b874;
	--ufo-violet:      #a66bff;  /* accent mystère          */
	--ufo-jaune:       #ffd23f;  /* hublots : la touche joyeuse */
	--ufo-rose:        #ff6fae;  /* promos, alertes douces  */
	--ufo-rayon:       0 0 6px rgba(57,255,159,.55), 0 0 22px rgba(57,255,159,.25);
	--ufo-arrondi:     14px;
	--ufo-titre:       "Orbitron", "Exo 2", system-ui, sans-serif;
	--ufo-corps:       "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =========================================================
   2. Fond : ciel étoilé qui scintille + nébuleuses
   ========================================================= */
html { background: var(--ufo-nuit); }

body,
body.custom-background {
	background-color: var(--ufo-nuit) !important;
	background-image:
		radial-gradient(ellipse 60% 40% at 85% 10%, rgba(166,107,255,.18), transparent 70%),
		radial-gradient(ellipse 50% 35% at 10% 80%, rgba(57,255,159,.10), transparent 70%),
		radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255,111,174,.06), transparent 70%) !important;
	background-attachment: fixed !important;
	color: var(--ufo-texte);
	font-family: var(--ufo-corps);
	font-size: 17px;
	line-height: 1.7;
	position: relative;
}

/* deux couches d'étoiles, décalées, qui clignotent à des rythmes différents */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-repeat: repeat;
}
body::before {
	background-image:
		radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent),
		radial-gradient(1px 1px at 120px 80px, #cfe0ff, transparent),
		radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent),
		radial-gradient(1px 1px at 280px 40px, #ffe9a8, transparent),
		radial-gradient(1px 1px at 60px 220px, #fff, transparent),
		radial-gradient(1.3px 1.3px at 330px 250px, #d8ffe9, transparent);
	background-size: 360px 300px;
	opacity: .7;
	animation: ufo-scintille 5s ease-in-out infinite alternate;
}
body::after {
	background-image:
		radial-gradient(1px 1px at 50px 120px, #fff, transparent),
		radial-gradient(1.6px 1.6px at 170px 20px, #e7d8ff, transparent),
		radial-gradient(1px 1px at 240px 200px, #fff, transparent),
		radial-gradient(1.2px 1.2px at 400px 90px, #fff, transparent);
	background-size: 460px 260px;
	opacity: .5;
	animation: ufo-scintille 7s ease-in-out infinite alternate-reverse;
}
@keyframes ufo-scintille { from { opacity: .25; } to { opacity: .85; } }

/* tout le contenu passe au-dessus des étoiles */
#page { position: relative; z-index: 1; background: transparent; }

/* =========================================================
   3. Typographie
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--ufo-titre) !important;
	color: #fff !important;
	letter-spacing: .04em;
	font-weight: 700;
}
h1, .entry-title, .product_title { text-shadow: 0 0 18px rgba(166,107,255,.45); }
h2 { color: var(--ufo-vert) !important; }

a { color: var(--ufo-vert); text-decoration: none; transition: color .2s, text-shadow .2s; }
a:hover, a:focus { color: var(--ufo-jaune); text-shadow: 0 0 10px rgba(255,210,63,.5); }

p, li, td, th, label, .entry-content { color: var(--ufo-texte); }
small, .posted-on, .byline, .woocommerce-result-count, .woocommerce-breadcrumb { color: var(--ufo-texte-doux) !important; }

blockquote {
	border-left: 3px solid var(--ufo-violet);
	background: rgba(166,107,255,.08);
	padding: 1em 1.4em;
	border-radius: 0 var(--ufo-arrondi) var(--ufo-arrondi) 0;
	font-style: italic;
}
code, pre, kbd {
	background: #05071a !important;
	color: var(--ufo-vert) !important;
	border: 1px solid var(--ufo-nuit-3);
	border-radius: 8px;
	font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
}
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ufo-violet), transparent); }

::selection { background: var(--ufo-vert); color: var(--ufo-nuit); }

/* =========================================================
   4. En-tête + soucoupe qui traverse le ciel
   ========================================================= */
.site-header {
	background: linear-gradient(180deg, rgba(10,14,34,.95), rgba(18,24,58,.85)) !important;
	border-bottom: 1px solid rgba(57,255,159,.25) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,.4);
	position: relative;
	overflow: hidden;
}
.site-header::after {
	content: "";
	position: absolute;
	top: 14px;
	left: -90px;
	width: 64px;
	height: 64px;
	background: url("ufo.svg") no-repeat center / contain;
	filter: drop-shadow(0 0 10px rgba(57,255,159,.6));
	animation: ufo-traversee 26s linear infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes ufo-traversee {
	0%   { transform: translate(0, 0) rotate(-4deg); }
	25%  { transform: translate(28vw, 14px) rotate(3deg); }
	50%  { transform: translate(55vw, -4px) rotate(-3deg); }
	75%  { transform: translate(82vw, 12px) rotate(4deg); }
	100% { transform: translate(115vw, 0) rotate(-4deg); }
}
.site-header .col-full { position: relative; z-index: 1; }

.site-title a,
.site-branding .site-title a {
	color: #fff !important;
	font-weight: 900;
	text-transform: uppercase;
	text-shadow: 0 0 8px rgba(57,255,159,.7), 0 0 24px rgba(166,107,255,.5);
}
.site-description { color: var(--ufo-jaune) !important; font-style: italic; }

/* Menu principal */
.main-navigation ul li a,
.storefront-primary-navigation .main-navigation ul.menu > li > a {
	color: var(--ufo-texte) !important;
	font-family: var(--ufo-titre);
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--ufo-vert) !important;
	text-shadow: var(--ufo-rayon);
}
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background: var(--ufo-nuit-2) !important;
	border: 1px solid var(--ufo-nuit-3);
	border-radius: 0 0 var(--ufo-arrondi) var(--ufo-arrondi);
}
.storefront-primary-navigation { background: transparent !important; }
button.menu-toggle {
	background: var(--ufo-nuit-2) !important;
	color: var(--ufo-vert) !important;
	border: 1px solid var(--ufo-vert) !important;
	border-radius: 999px;
}
button.menu-toggle::before, button.menu-toggle::after, button.menu-toggle span::before { background-color: var(--ufo-vert) !important; }

/* Mini-panier + recherche dans l'en-tête */
.site-header-cart .cart-contents { color: var(--ufo-jaune) !important; }
.site-header-cart .widget_shopping_cart,
.site-header .widget_shopping_cart { background: var(--ufo-nuit-2) !important; border: 1px solid var(--ufo-nuit-3); }
.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input[type="text"] { background: var(--ufo-nuit-2) !important; }

/* =========================================================
   5. Boutons : des « hublots » néon
   ========================================================= */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .wc-block-components-button,
.wp-element-button, .wp-block-button__link {
	background: linear-gradient(135deg, var(--ufo-vert), var(--ufo-vert-sombre)) !important;
	color: #04121a !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--ufo-titre) !important;
	font-weight: 700 !important;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .8em 1.6em;
	box-shadow: var(--ufo-rayon);
	transition: transform .15s ease, box-shadow .2s ease, background .2s;
}
button:hover, input[type="submit"]:hover, .button:hover,
.wc-block-components-button:hover, .wp-element-button:hover, .wp-block-button__link:hover {
	background: linear-gradient(135deg, var(--ufo-jaune), #ffb02e) !important;
	color: #1a1200 !important;
	transform: translateY(-2px);
	box-shadow: 0 0 8px rgba(255,210,63,.6), 0 0 28px rgba(255,210,63,.3);
}
button:active, .button:active { transform: translateY(0) scale(.98); }

/* Bouton secondaire (ex. « Voir le panier ») */
.button.alt, button.alt, .checkout-button, #place_order,
.single_add_to_cart_button {
	background: linear-gradient(135deg, var(--ufo-violet), #7a3cff) !important;
	color: #fff !important;
	box-shadow: 0 0 8px rgba(166,107,255,.6), 0 0 26px rgba(166,107,255,.3);
}
.button.alt:hover, .checkout-button:hover, #place_order:hover, .single_add_to_cart_button:hover {
	background: linear-gradient(135deg, var(--ufo-jaune), #ffb02e) !important;
	color: #1a1200 !important;
}

/* =========================================================
   6. Champs de formulaire
   ========================================================= */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], input[type="url"], textarea, select,
.select2-container .select2-selection, .wc-block-components-text-input input {
	background: rgba(5,7,26,.85) !important;
	color: var(--ufo-texte) !important;
	border: 1px solid var(--ufo-nuit-3) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--ufo-vert) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(57,255,159,.2) !important;
}
::placeholder { color: var(--ufo-texte-doux); opacity: .8; }
.select2-dropdown { background: var(--ufo-nuit-2) !important; color: var(--ufo-texte); }

/* =========================================================
   7. Boutique WooCommerce : les énigmes en « cartes mission »
   ========================================================= */
ul.products li.product,
.wc-block-grid__product {
	background: linear-gradient(180deg, var(--ufo-nuit-2), rgba(18,24,58,.6));
	border: 1px solid var(--ufo-nuit-3);
	border-radius: var(--ufo-arrondi);
	padding: 1.2em 1em 1.4em !important;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
/* petit rayon tracteur qui s'allume au survol */
ul.products li.product::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: 60%;
	height: 80%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at top, rgba(57,255,159,.22), transparent 70%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: var(--ufo-vert);
	box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 18px rgba(57,255,159,.25);
}
ul.products li.product:hover::before { opacity: 1; }
ul.products li.product img { border-radius: 10px; }
ul.products li.product .woocommerce-loop-product__title { font-size: 1em !important; margin-top: .6em; }

.price, .woocommerce-Price-amount, .wc-block-components-product-price {
	color: var(--ufo-jaune) !important;
	font-family: var(--ufo-titre);
	font-weight: 700;
}
.price del, .price del .woocommerce-Price-amount { color: var(--ufo-texte-doux) !important; opacity: .7; }
.price ins { text-decoration: none; }

.onsale, .wc-block-components-product-sale-badge {
	background: var(--ufo-rose) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--ufo-titre);
	font-size: .7em;
	text-transform: uppercase;
	letter-spacing: .08em;
	box-shadow: 0 0 14px rgba(255,111,174,.5);
}

.star-rating span::before, .star-rating::before { color: var(--ufo-jaune) !important; }

/* Fiche produit (une énigme) */
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--ufo-arrondi); }
.single-product div.product .summary {
	background: var(--ufo-nuit-2);
	border: 1px solid var(--ufo-nuit-3);
	border-radius: var(--ufo-arrondi);
	padding: 1.6em;
}
.woocommerce-tabs ul.tabs li a { color: var(--ufo-texte-doux) !important; font-family: var(--ufo-titre); font-size: .85em; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ufo-vert) !important; }
.woocommerce-tabs ul.tabs, .woocommerce-tabs ul.tabs li { border-color: var(--ufo-nuit-3) !important; }
.quantity .qty { text-align: center; }

/* Panier, commande, tableaux */
table, table th, table td,
.shop_table, .shop_table th, .shop_table td,
#order_review, .cart_totals {
	background: transparent !important;
	border-color: var(--ufo-nuit-3) !important;
	color: var(--ufo-texte);
}
table th, .shop_table th { color: var(--ufo-vert) !important; font-family: var(--ufo-titre); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; }
table tbody tr:nth-child(2n) td { background: rgba(255,255,255,.02) !important; }
#payment, .wc_payment_methods, #payment .payment_box,
.woocommerce-checkout-review-order {
	background: var(--ufo-nuit-2) !important;
	color: var(--ufo-texte) !important;
	border-radius: var(--ufo-arrondi);
}
#payment .payment_box::before { border-bottom-color: var(--ufo-nuit-2) !important; }

/* Messages WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments,
.wc-block-components-notice-banner {
	background: var(--ufo-nuit-2) !important;
	color: var(--ufo-texte) !important;
	border-left: 4px solid var(--ufo-vert) !important;
	border-radius: 10px;
}
.woocommerce-info { border-left-color: var(--ufo-violet) !important; }
.woocommerce-error { border-left-color: var(--ufo-rose) !important; }
.woocommerce-message a, .woocommerce-info a { color: var(--ufo-jaune) !important; }

/* Espace client : téléchargements des énigmes achetées */
.woocommerce-MyAccount-navigation ul li a {
	color: var(--ufo-texte) !important;
	border-radius: 8px;
	padding: .5em .8em;
	display: block;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--ufo-nuit-3); color: var(--ufo-vert) !important; }
.woocommerce-MyAccount-navigation ul { border-color: var(--ufo-nuit-3) !important; }
.woocommerce-MyAccount-navigation ul li { border-color: var(--ufo-nuit-3) !important; }

/* Pagination + fil d'Ariane */
.woocommerce-pagination .page-numbers li .page-numbers,
.pagination .page-numbers { background: var(--ufo-nuit-2) !important; color: var(--ufo-texte) !important; border-radius: 8px; }
.woocommerce-pagination .page-numbers li .page-numbers.current,
.pagination .page-numbers.current { background: var(--ufo-vert) !important; color: var(--ufo-nuit) !important; }
.storefront-breadcrumb { background: transparent !important; }

/* =========================================================
   8. Contenu, widgets, pied de page
   ========================================================= */
.site-content, .content-area, .site-main { background: transparent !important; }
.hentry .entry-content, .widget { color: var(--ufo-texte); }
.widget .widget-title, .widget .widgettitle {
	border-bottom: 1px solid var(--ufo-nuit-3) !important;
	color: var(--ufo-vert) !important;
	font-size: .95em;
}
.wp-block-image img, .entry-content img { border-radius: 10px; }

.site-footer {
	background: linear-gradient(0deg, #05071a, rgba(10,14,34,.95)) !important;
	color: var(--ufo-texte-doux) !important;
	border-top: 1px solid rgba(166,107,255,.3);
}
.site-footer a { color: var(--ufo-vert) !important; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff !important; }
.site-info { color: var(--ufo-texte-doux) !important; }

/* barre du bas sur mobile */
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background-color: var(--ufo-nuit-2) !important;
	color: var(--ufo-vert) !important;
	border-color: var(--ufo-nuit-3) !important;
}
.storefront-handheld-footer-bar ul li.cart .count {
	background: var(--ufo-jaune) !important;
	color: var(--ufo-nuit) !important;
	border-color: var(--ufo-nuit-2) !important;
}

/* =========================================================
   9. Petits extras à utiliser dans tes pages
   ---------------------------------------------------------
   Dans un bloc, onglet « Avancé » → « Classe CSS additionnelle » :
     ufo-carte    : encadré façon écran de vaisseau
     ufo-indice   : bulle d'indice (jaune)
     ufo-code     : texte « terminal » vert (pour tes messages chiffrés)
     ufo-flotte   : fait flotter doucement un élément (image, titre…)
   ========================================================= */
.ufo-carte {
	background: var(--ufo-nuit-2);
	border: 1px solid var(--ufo-nuit-3);
	border-radius: var(--ufo-arrondi);
	padding: 1.4em 1.6em;
	box-shadow: inset 0 0 30px rgba(57,255,159,.06);
}
.ufo-indice {
	background: rgba(255,210,63,.1);
	border: 1px dashed var(--ufo-jaune);
	border-radius: var(--ufo-arrondi);
	padding: 1em 1.4em;
	color: #fff4c8;
}
.ufo-indice::before { content: "💡 "; }
.ufo-code {
	font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
	background: #03050f;
	color: var(--ufo-vert);
	padding: 1em 1.2em;
	border-radius: 10px;
	border: 1px solid rgba(57,255,159,.3);
	text-shadow: 0 0 6px rgba(57,255,159,.5);
	letter-spacing: .12em;
	word-break: break-all;
}
.ufo-flotte { animation: ufo-flotte 4s ease-in-out infinite; }
@keyframes ufo-flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =========================================================
   10. Accessibilité : pas d'animation pour ceux qui n'en veulent pas
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	body::before, body::after, .site-header::after, .ufo-flotte { animation: none !important; }
	.site-header::after { left: auto; right: 20px; }
}
:focus-visible { outline: 2px solid var(--ufo-jaune) !important; outline-offset: 3px; }

@media (max-width: 767px) {
	body { font-size: 16px; }
	.site-header::after { width: 44px; height: 44px; top: 8px; }
}