/* Theme Matrix E-Com — toutes les couleurs sont des variables : change-les ici.
   Base : matrix / matrixanim (memes noms de variables, aucun renommage). */
:root {
  --bg: #0a0a0a;
  --fg: #e8ffe8;
  --accent: #00ff41;
  --danger: #ff0033;
  --card: #101510;
  --border: #1f3a1f;
  --font-title: 'Orbitron', sans-serif;
  --font-body: 'Share Tech Mono', monospace;

  /* propres a matrix-ecom */
  --panel: rgba(16, 21, 16, .92);
  --panel-solid: #0d120d;
  --glow: rgba(0, 255, 65, .12);
  --muted: rgba(232, 255, 232, .62);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem; }
h1, h2, h3 { font-family: var(--font-title); color: var(--accent); }
.muted { color: var(--muted); font-size: .85rem; }
.hl { color: var(--accent); }

/* ---------- pluie ---------- */
#matrix-rain { position: fixed; inset: 0; z-index: -1; opacity: 1; pointer-events: none; }
header.site, main, footer.site { position: relative; z-index: 1; }

/* ---------- entete ---------- */
header.site {
  position: sticky; top: 0; z-index: 5;
  background: rgba(10, 10, 10, .94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.hdr { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.2rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--accent); }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; color: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); }
.brand-name { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; }

.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem; margin-left: auto; }
.main-nav a {
  color: var(--fg); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem 0; border-bottom: 1px solid transparent; white-space: nowrap;
}
.main-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.main-nav a.active, .main-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.hdr-tools { display: flex; align-items: center; gap: .35rem; margin-left: .6rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--fg);
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; padding: 0; position: relative;
}
.icon-btn:hover { color: var(--accent); border-color: var(--border); text-decoration: none; }
.cart-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg);
  font-size: .66rem; font-weight: bold; border-radius: 999px; padding: 0 4px;
}
.hdr-search { padding-bottom: .9rem; }
.hdr-search form { display: flex; gap: .5rem; }
.hdr-search input {
  flex: 1; background: var(--panel-solid); color: var(--fg);
  border: 1px solid var(--border); padding: .55rem .8rem; font-family: var(--font-body);
}
.hdr-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--glow); }

/* ---------- hero ---------- */
.hero { padding: 3.5rem 0 2rem; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.hero-solo { grid-template-columns: 1fr; max-width: 760px; }
.eyebrow {
  color: var(--accent); font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; margin: 0 0 .9rem; opacity: .9;
}
.hero-copy h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; margin: 0 0 1rem;
  color: var(--fg); text-shadow: 0 0 18px rgba(0, 255, 65, .18);
}
.hero-copy h1 em, .hero-copy h1 strong { color: var(--accent); font-style: normal; }
.hero-prose { color: var(--muted); line-height: 1.7; max-width: 46ch; }
.hero-cta { margin-top: 1.8rem; }
.hero-visual .pimg-hero { aspect-ratio: 4 / 3; }

/* ---------- boutons ---------- */
.btn {
  display: inline-block; background: var(--accent); color: var(--bg);
  padding: .7rem 1.7rem; border-radius: 3px; font-weight: bold;
  letter-spacing: .14em; text-transform: uppercase; font-size: .8rem;
}
.btn:hover { text-decoration: none; filter: brightness(1.15); box-shadow: 0 0 18px var(--glow); }
.btn-line {
  font-family: var(--font-body); background: transparent; color: var(--accent);
  border: 1px solid var(--accent); padding: .5rem 1.2rem; cursor: pointer;
}
.btn-line:hover { background: var(--accent); color: var(--bg); }

/* ---------- sections / panneaux ---------- */
.section { padding: 2.2rem 0 3rem; }
.section-title {
  font-size: 1rem; letter-spacing: .26em; text-transform: uppercase;
  margin: 0 0 1.4rem; display: flex; align-items: center; gap: 1rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.panel {
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 0 24px var(--glow); padding: 1.6rem;
}
.empty { text-align: center; color: var(--muted); }

/* ---------- grille produits ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: .9rem; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--accent); box-shadow: 0 0 22px var(--glow); transform: translateY(-2px); }
.card-link { color: inherit; display: block; }
.card-link:hover { text-decoration: none; }
.card-title {
  font-family: var(--font-body); color: var(--fg); font-size: .92rem;
  margin: .9rem 0 0; line-height: 1.35;
}
.card .price { color: var(--accent); font-size: 1.05rem; margin-top: .45rem; }

/* image produit */
.pimg {
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.pimg img { width: 100%; height: 100%; object-fit: cover; }
.pimg-card { aspect-ratio: 1 / 1; }
.pimg-full { aspect-ratio: 1 / 1; }
.pimg-void { font-family: var(--font-title); color: var(--accent); opacity: .28; font-size: 1.6rem; letter-spacing: .1em; }

/* ---------- fiche produit ---------- */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.product-info h1 { font-size: 1.6rem; margin: 0 0 .6rem; }
.product-info .price { font-size: 1.5rem; margin-bottom: 1.2rem; }
.product-buy { margin: 1.4rem 0; }
.back { margin-top: 1.6rem; font-size: .85rem; }
.pagination { margin-top: 2rem; }

/* ---------- prose ---------- */
.prose { line-height: 1.7; }
.prose img { max-width: 100%; }
.prose a { text-decoration: underline; }

/* ---------- pied ---------- */
footer.site {
  border-top: 1px solid var(--border); margin-top: 2rem; padding: 1.8rem 0;
  background: rgba(10, 10, 10, .94); font-size: .82rem; color: var(--muted);
}
.ftr { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; }
.ftr-links { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.rain-toggle { font-size: .78rem; opacity: .8; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .hero-grid, .product-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 2.2rem; }
  .hero-visual { order: -1; }
  .main-nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: .3rem 1rem; }
  .hdr-tools { margin-left: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
}

/* ===== Porte d'entrée — Matrixanim v1.1.0 (même style que la porte ENTER) ===== */
/* Tant que .gate-locked est sur <html> : seuls la pluie et la porte sont visibles. */
html.gate-locked body { overflow: hidden; }
html.gate-locked header.site,
html.gate-locked main,
html.gate-locked footer.site { visibility: hidden; }
html.gate-locked #matrix-rain { z-index: 0; }
#rebel-gate {
  position: fixed; inset: 0; z-index: 10; display: none;
  align-items: center; justify-content: center;
}
html.gate-locked #rebel-gate { display: flex; }
#rebel-gate .gate-box {
  background: rgba(16, 21, 16, .94);
  border: 1px solid var(--accent);
  box-shadow: 0 0 30px rgba(0, 255, 65, .25), inset 0 0 12px rgba(0, 255, 65, .06);
  padding: 1.6rem 1.8rem; max-width: 560px; width: calc(100% - 2rem);
  text-align: center; max-height: 92vh; overflow: auto;
}
#rebel-gate h1 {
  font-family: var(--font-title); color: var(--accent);
  font-size: 1.2rem; letter-spacing: .18em; margin: 0 0 1rem;
  text-shadow: 0 0 8px rgba(0, 255, 65, .6);
}
#rebel-gate .gate-checks { font-size: .85rem; text-align: left; margin-bottom: 1.2rem; }
#rebel-gate .gate-checks label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
#rebel-gate .gate-checks input { accent-color: var(--accent); margin-top: .15rem; cursor: pointer; }
#gate-enter {
  font-family: var(--font-body); font-size: 1.05rem; letter-spacing: .2em;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); padding: .7rem 2.2rem; cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
#gate-enter:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
#gate-enter:disabled { opacity: .35; cursor: not-allowed; }
#rebel-gate .gate-hint { margin-top: .8rem; font-size: .7rem; opacity: .55; }
#rebel-gate.gate-out { animation: gateOut .45s ease forwards; }
@keyframes gateOut { to { opacity: 0; transform: scale(1.03); } }
/* Overlay termes (fallback si aucune page CMS "termes") */
#gate-terms-overlay {
  position: fixed; inset: 0; z-index: 11; display: none;
  background: rgba(10, 10, 10, .9); align-items: center; justify-content: center;
}
#gate-terms-overlay.open { display: flex; }
#gate-terms-overlay .box {
  background: var(--card); border: 1px solid var(--border);
  max-width: 560px; width: calc(100% - 2rem); max-height: 75vh; overflow: auto;
  padding: 1.6rem; font-size: .82rem; text-align: left; line-height: 1.55;
}
#gate-terms-overlay h2 { font-family: var(--font-title); color: var(--accent); font-size: 1rem; margin: 0 0 .8rem; letter-spacing: .12em; }
#gate-terms-overlay .close { margin-top: 1.2rem; text-align: center; }
.btn-line { font-family: var(--font-body); background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: .4rem 1.4rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #rebel-gate.gate-out { animation: none; opacity: 0; } }

/* ==========================================================================
   PATCH 01 — pages des modules + formulaires
   Ajoute a la fin : ce bloc gagne sur ce qui precede, y compris le bloc porte.
   ========================================================================== */

/* Les vues des modules (shop, checkout, forms...) ne passent PAS par les gabarits
   du theme : elles n'utilisent que layouts.app, et leur conteneur racine n'est pas
   .container — d'ou le contenu colle a gauche pendant que l'entete etait centree.
   On centre donc tout enfant direct de <main> qui n'est pas une section du theme. */
main > *:not(.hero):not(.section) {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
/* le titre de page et le composant Livewire sont deux enfants directs de <main> :
   on met l'air en haut et en bas de l'ensemble, pas entre les deux. */
main > *:not(.hero):not(.section):first-child { padding-top: 2rem; }
main > *:not(.hero):not(.section):last-child { padding-bottom: 3rem; }
/* pas de double gouttiere si le module a quand meme un .container a l'interieur */
main > *:not(.hero):not(.section) > .container { padding-left: 0; padding-right: 0; }

/* ---------- selecteur de langue (entete) ---------- */
.lang-switch { display: flex; align-items: center; gap: .5rem; margin-right: .4rem; }
.lang-switch a, .lang-switch button {
  color: var(--fg); background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.lang-switch a:hover, .lang-switch button:hover { color: var(--accent); text-decoration: none; }
.lang-switch a.active, .lang-switch [aria-current="true"] { color: var(--accent); }
.lang-switch select { width: auto; padding: .3rem .5rem; font-size: .78rem; }

/* ---------- formulaires ----------
   Sur le Checkout les champs sortaient en blanc navigateur : seul le champ de
   recherche de l'entete etait habille. Ici c'est global. */
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"], input[type="date"],
input[type="datetime-local"], input:not([type]), select, textarea {
  width: 100%;
  background: var(--panel-solid);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .6rem .8rem;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.4;
}
textarea { min-height: 8rem; resize: vertical; }
/* Le champ du catalogue Livewire porte un style inline (padding + min-width:280px).
   Sans borne, mon width:100% l'etirerait sur les 1180 px : on le plafonne. */
input[type="search"] { max-width: 420px; }
.hdr-search input[type="search"] { max-width: none; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--glow);
}
::placeholder { color: rgba(232, 255, 232, .38); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
option { background: var(--panel-solid); color: var(--fg); }

label {
  display: block; color: var(--fg); font-size: .82rem;
  letter-spacing: .08em; margin-bottom: .35rem;
}
label:has(input[type="radio"]), label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem;
}
input[type="radio"], input[type="checkbox"] {
  width: auto; accent-color: var(--accent); margin: 0;
}

fieldset {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1.1rem 1.2rem; margin: 1.4rem 0;
}
legend {
  font-family: var(--font-title); color: var(--accent);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; padding: 0 .45rem;
}

button, input[type="submit"], input[type="button"] { font-family: var(--font-body); cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
.help, .hint, small { color: var(--muted); font-size: .78rem; }
.error, .invalid-feedback, .text-danger { color: var(--danger); font-size: .82rem; }

/* ---------- tableaux (panier, commandes) ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--accent); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: normal; }

/* ==========================================================================
   PATCH 03 — centrage des panneaux dans la colonne
   ========================================================================== */

/* Les vues du module sont ecrites pour du mobile : leurs boites ont une largeur
   contrainte et restent collees a gauche de la colonne de 1180 px (fiche produit :
   panneau de ~757 px). Une marge auto centre CE QUI EST contraint et ne fait rien
   sur ce qui est deja pleine largeur (les <p> et la .grid du catalogue).
   Un seul niveau de descente, volontairement : appliquer ca plus profond
   centrerait aussi les .card dans leurs cellules de grille et les ferait retrecir. */
main > *:not(.hero):not(.section) > * {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   PATCH 06 — boutons nus
   La patch 01 n'avait donne aux <button> que la police et le curseur : tout bouton
   sans classe .btn retombait sur le gris du navigateur, texte sombre sur fond noir,
   illisible (vu sur les boutons du whois et le bouton de paiement).
   Ici tout bouton est habille par defaut ; .btn et .btn-line gardent leur look,
   ils passent APRES par leurs propres regles plus loin dans ce bloc.
   ========================================================================== */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  width: auto;
  background: var(--panel-solid);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: .55rem 1.2rem;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .1em;
  cursor: pointer;
  line-height: 1.3;
}
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled) {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 14px var(--glow);
}
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}
/* Un bouton vide (icone seule ou libelle absent) ne doit pas devenir une pastille
   grise indechiffrable : on lui garde une taille minimale et le contour vert. */
button:empty, input[type="submit"][value=""] { min-width: 2.4rem; min-height: 2.2rem; }

/* Les boutons du theme reprennent la main sur la regle generique ci-dessus. */
button.btn, a.btn, input.btn[type="submit"] {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  font-weight: bold;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .7rem 1.7rem;
}
button.btn:hover:not(:disabled), a.btn:hover, input.btn[type="submit"]:hover {
  filter: brightness(1.15);
  background: var(--accent);
  color: var(--bg);
}
button.btn-line { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Les icones de l'entete ne sont pas des boutons de formulaire : on annule. */
.icon-btn, .hdr-tools button {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  padding: 0;
  min-width: 0;
}
.icon-btn:hover, .hdr-tools button:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--border);
  box-shadow: none;
}