/* Aymen Meuble — site vitrine et boutique (aymen-meuble-05.com)
   Dérivé du site de Meta Security : même mise en page, thème sombre, l'or du
   logo d'Aymen réservé à l'accent (boutons, liens actifs, bordures). Polices
   auto-hébergées (Manrope + Inter) — aucune dépendance externe. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/Inter-var.woff2') format('woff2');
}

:root {
  /* Palette — gris dominant, jaune en accent uniquement, pas de bleu */
  /* Gamme de gris (du plus profond au plus clair) — plus de noir :
     le site vit entre ces tons, les fonds jouent en dégradés. */
  --noir-profond: #34363b;   /* gris profond (ex-noir) — sert aussi d'encre sur jaune */
  --anthracite: #3d3f45;
  --anthracite-2: #46484e;
  --anthracite-3: #4f5157;
  --gris-clair-fond: #55575e;
  --gris-souris: #c3c5ca;
  --gris-souris-2: #999ba1;
  --blanc: #f7f8f9;
  --bord: rgba(247, 248, 249, 0.12);
  --bord-fort: rgba(247, 248, 249, 0.22);
  --verre-fond: rgba(247, 248, 249, 0.05);
  --verre-fond-hover: rgba(247, 248, 249, 0.09);
  --jaune: #d4a824;
  --jaune-vif: #ebc24a;
  --jaune-teinte: rgba(212, 168, 36, 0.10);
  --jaune-halo: rgba(212, 168, 36, 0.28);

  /* Motif « circuit imprimé » (tuile SVG inline, gris + rares nœuds jaunes) —
     la texture technologique des fonds, façon carte-mère / biométrie. */
  --circuit: none;

  --rayon: 16px;
  --rayon-sm: 10px;
  --ombre: 0 1px 2px rgba(20, 21, 24, 0.18), 0 10px 30px rgba(20, 21, 24, 0.28);
  --ombre-lg: 0 4px 8px rgba(20, 21, 24, 0.2), 0 24px 60px rgba(20, 21, 24, 0.35);
  --transition: 220ms cubic-bezier(.2, .7, .3, 1);

  --police-titre: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --police-texte: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--police-texte);
  background: linear-gradient(180deg, var(--anthracite), var(--noir-profond) 320px);
  color: var(--gris-souris);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--police-titre); color: var(--blanc); }

::selection { background: var(--jaune); color: var(--noir-profond); }

.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- Texture de fond technologique, réutilisée sur plusieurs sections ---- */
.grille-tech {
  background-image:
    linear-gradient(rgba(247, 248, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 248, 249, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- En-tête ---- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(61, 63, 69, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--bord);
  transition: border-color var(--transition), background var(--transition);
}
/* Fil laser sous l'en-tête — deux segments jaunes diffus courent le long
   de la bordure, discret rappel des liaisons optiques. */
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  pointer-events: none; opacity: .55;
  background: linear-gradient(90deg,
    transparent, var(--jaune-halo) 18%, transparent 40%,
    transparent 62%, var(--jaune-halo) 84%, transparent);
}
.barre { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.marque { display: flex; align-items: center; text-decoration: none; }
.logo-mark { height: 46px; width: auto; display: block; }
.navigation { display: flex; align-items: center; gap: 28px; }
.navigation a {
  color: var(--gris-souris); text-decoration: none; font-size: 14.5px; font-weight: 500;
  position: relative; padding: 4px 0; transition: color var(--transition);
}
.navigation a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--jaune); border-radius: 2px; transition: right var(--transition);
}
.navigation a:hover { color: var(--blanc); }
.navigation a:hover::after { right: 0; }
/* Spécificité volontairement supérieure à `.navigation a` (qui pose
   padding 4px 0 + soulignement animé) — sinon la pastille perd son
   rembourrage et le texte colle aux bords. */
.navigation a.bouton-nav, .bouton-nav {
  background: var(--jaune); color: var(--noir-profond) !important; font-weight: 700;
  padding: 10px 22px; border-radius: 999px; box-shadow: 0 0 0 rgba(212, 168, 36, 0);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.navigation a.bouton-nav::after, .bouton-nav::after { content: none; }
.navigation a.bouton-nav:hover, .bouton-nav:hover { background: var(--jaune-vif); box-shadow: 0 0 24px var(--jaune-halo); transform: translateY(-1px); }

/* ---- Héros ---- */
.heros {
  position: relative;
  min-height: 100vh; display: flex; align-items: center;
  padding: 140px 0 100px;
  background:
    radial-gradient(900px 560px at 50% 8%, rgba(212, 168, 36, 0.05), transparent 62%),
    radial-gradient(1200px 700px at 88% 90%, rgba(247, 248, 249, 0.06), transparent 60%),
    linear-gradient(165deg, var(--gris-clair-fond), var(--anthracite) 55%, var(--noir-profond));
  color: var(--gris-souris);
  overflow: hidden;
}
.heros::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    var(--circuit),
    linear-gradient(rgba(247, 248, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 248, 249, 0.05) 1px, transparent 1px);
  background-size: 480px 480px, 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 40%, black 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 40%, black 20%, transparent 78%);
}
/* Ligne de balayage — le trait lumineux qui parcourt le héros de haut en
   bas, comme le faisceau d'un scanner biométrique. Un voile dégradé se
   termine par un fil jaune net ; il traverse puis s'éteint. */
.heros::after {
  content: ""; position: absolute; left: 0; right: 0; top: -110px; height: 110px;
  pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(212, 168, 36, 0.05) 72%,
    rgba(212, 168, 36, 0.16) 96%,
    rgba(217, 230, 74, 0.75) 99.2%, rgba(217, 230, 74, 0.75) 100%);
  animation: balayage 8.5s linear infinite;
}
@keyframes balayage {
  0%   { top: -110px; opacity: 0; }
  6%   { opacity: .55; }
  82%  { opacity: .55; }
  100% { top: 100%; opacity: 0; }
}

/* ---- Composition Hero — anneaux HUD / bouclier / grille hexagonale ---- */
.hero-visuel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: .55;
}
.hero-visuel svg {
  width: min(920px, 92vw); height: auto; overflow: visible;
  /* Le centre du visuel s'efface derrière le texte — les anneaux encadrent
     le titre au lieu de le parasiter (retour PO 2026-08-02). */
  -webkit-mask-image: radial-gradient(ellipse 44% 50% at 50% 48%, transparent 55%, black 82%);
  mask-image: radial-gradient(ellipse 44% 50% at 50% 48%, transparent 55%, black 82%);
}
/* La tache jaune centrale floue — retirée (retour PO : "pas beau du tout"). */
.halo-coeur { display: none; }
.anneau { transform-origin: 400px 340px; }
.anneau-1 { animation: tourner 46s linear infinite; }
.anneau-2 { animation: tourner-inverse 60s linear infinite; }
.anneau-3 { animation: tourner 80s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes tourner-inverse { to { transform: rotate(-360deg); } }
.halo-coeur { animation: pulser 4.5s ease-in-out infinite; transform-origin: 400px 340px; }
@keyframes pulser { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
.particule { animation: flotter 6s ease-in-out infinite; }
.particule:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.particule:nth-child(3n) { animation-duration: 5s; animation-delay: -1s; }
@keyframes flotter { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-10px); opacity: 1; } }
.trait-scan { stroke-dasharray: 3 7; animation: filer 3.6s linear infinite; }
@keyframes filer { to { stroke-dashoffset: -100; } }

.heros-contenu { position: relative; z-index: 2; text-align: left; max-width: 720px; }
.heros-contenu.heros-centre { text-align: center; margin: 0 auto; }
.heros-contenu.heros-centre .actions { justify-content: center; }

/* Cadre de visée biométrique — quatre coins jaunes qui encadrent le texte
   du héros, comme le viseur d'un système de reconnaissance faciale.
   Aucun fond, aucun flou (le panneau de verre reste banni) : juste les
   équerres, avec une respiration lente. */
.heros-contenu::before {
  content: ""; position: absolute; inset: -36px -44px; pointer-events: none;
  background:
    linear-gradient(var(--jaune), var(--jaune)) left top    / 30px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left top    / 2px 30px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top   / 30px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top   / 2px 30px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 30px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 2px 30px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 30px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 2px 30px no-repeat;
  filter: drop-shadow(0 0 8px var(--jaune-halo));
  animation: viser 5s ease-in-out infinite;
}
@keyframes viser { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* Le panneau de verre autour du texte du héros est retiré (retour PO
   2026-08-02 : il floutait le visuel et créait une tache disgracieuse) —
   le texte pose directement sur le fond, le visuel s'efface derrière lui. */
.heros-centre {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--jaune); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12px;
  margin-bottom: 18px;
}
.surtitre::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune);
  box-shadow: 0 0 12px var(--jaune-halo);
  /* Pouls « système en ligne » — le point vit, comme un témoin REC. */
  animation: clignoter 1.8s ease-in-out infinite;
}
@keyframes clignoter { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.heros h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.14; margin-bottom: 20px; color: var(--blanc); font-weight: 800; letter-spacing: -0.01em; }
.surligne, .accent { color: var(--jaune); }
.sous-titre, .sous-heros { color: var(--gris-souris); margin-bottom: 34px; font-size: 17.5px; max-width: 620px; }
.heros-centre .sous-heros { margin-left: auto; margin-right: auto; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--jaune); color: var(--noir-profond); font-weight: 700; font-family: var(--police-titre);
  padding: 14px 30px; border-radius: 999px; text-decoration: none; font-size: 15.5px;
  box-shadow: 0 0 0 rgba(212, 168, 36, 0);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton:hover { background: var(--jaune-vif); transform: translateY(-2px); box-shadow: 0 10px 30px -6px var(--jaune-halo), 0 0 30px var(--jaune-halo); }
.bouton:active { transform: translateY(0) scale(.97); }
.bouton.secondaire {
  background: rgba(244, 245, 246, 0.04); color: var(--blanc); border: 1.5px solid var(--bord-fort); box-shadow: none;
}
.bouton.secondaire:hover { border-color: var(--jaune); color: var(--jaune); background: var(--jaune-teinte); transform: translateY(-2px); }
.bouton.secondaire:active { transform: translateY(0) scale(.97); }
.section .bouton.secondaire { color: var(--blanc); }

.scan { display: none; }

/* ---- Habillage HUD du héros (accueil) — étiquettes techniques et
   colonnes binaires, façon interface de supervision. Décoratif pur :
   aria-hidden côté HTML, pointer-events désactivés ici. ---- */
.hud-tag {
  position: absolute; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gris-souris-2); opacity: .85; white-space: nowrap;
}
.hud-tag b { color: var(--jaune); font-weight: 600; }
.hud-tag .temoin {
  width: 6px; height: 6px; border-radius: 50%; background: var(--jaune);
  box-shadow: 0 0 10px var(--jaune-halo); animation: clignoter 1.4s ease-in-out infinite;
}
.hud-hg { top: 30px; left: 30px; }
.hud-bd { bottom: 26px; right: 30px; }

.colonne-binaire {
  position: absolute; z-index: 1; top: 70px; bottom: 70px; pointer-events: none;
  font-family: Consolas, 'Courier New', monospace; font-size: 11px;
  color: rgba(247, 248, 249, 0.14); letter-spacing: 5px; line-height: 2.1;
  writing-mode: vertical-rl; text-orientation: upright; overflow: hidden;
  user-select: none;
}
.colonne-binaire b { color: rgba(212, 168, 36, 0.35); font-weight: 400; }
.colonne-binaire.gauche { left: 3vw; }
.colonne-binaire.droite { right: 3vw; }

.hud-infos {
  margin-top: 36px; display: inline-flex; flex-wrap: wrap; gap: 10px 18px;
  justify-content: center; align-items: center;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gris-souris-2);
}
.hud-infos span + span::before { content: "//"; color: var(--jaune); opacity: .75; margin-right: 18px; }
@media (max-width: 900px) { .hud-tag, .colonne-binaire { display: none; } }

/* ---- Sections ---- */
.section { position: relative; padding: 92px 0; background: linear-gradient(180deg, var(--anthracite), var(--noir-profond)); }
.section h2 { font-size: 32px; text-align: center; margin-bottom: 12px; font-weight: 800; letter-spacing: -0.01em; }
.section h2::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  background: var(--jaune); margin: 16px auto 0; box-shadow: 0 0 12px var(--jaune-halo);
}
.intro { text-align: center; color: var(--gris-souris); max-width: 640px; margin: 0 auto 50px; font-size: 16.5px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }

/* ---- Cartes verre ---- */
.carte {
  position: relative;
  background: var(--verre-fond);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 30px 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.carte:hover {
  border-color: rgba(212, 168, 36, 0.55);
  background: var(--verre-fond-hover);
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg), 0 0 0 1px rgba(212, 168, 36, 0.12), 0 0 40px -12px var(--jaune-halo);
}
/* Coins de ciblage — au survol, la carte se « verrouille » comme une cible
   dans un viseur : quatre équerres jaunes convergent vers l'intérieur. */
.carte::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--jaune), var(--jaune)) left top    / 14px 1.6px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left top    / 1.6px 14px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top   / 14px 1.6px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top   / 1.6px 14px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 14px 1.6px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 1.6px 14px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 14px 1.6px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 1.6px 14px no-repeat;
  opacity: 0; transform: scale(1.045);
  transition: opacity var(--transition), transform var(--transition);
}
.carte:hover::after { opacity: .85; transform: none; }
.carte h3 { font-size: 18px; margin: 16px 0 8px; color: var(--blanc); font-weight: 700; }
.carte p { color: var(--gris-souris); font-size: 15px; }
.carte p a { color: var(--jaune); text-decoration: none; font-weight: 600; }
.carte p a:hover { text-decoration: underline; }

.icone {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--jaune-teinte); border-radius: 13px;
  transition: background var(--transition), transform var(--transition);
}
.icone svg { width: 26px; height: 26px; stroke: var(--jaune); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.carte:hover .icone { background: rgba(212, 168, 36, 0.18); transform: scale(1.06); }

.carte-service { display: block; text-decoration: none; color: inherit; }
.carte-service .en-savoir {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; color: var(--jaune); font-weight: 700; font-size: 14px;
  transition: transform var(--transition);
}
.carte-service:hover .en-savoir { transform: translateX(5px); }

/* ---- Bande « Pourquoi » ---- */
.bande {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--anthracite-2), var(--anthracite));
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
/* Traces de circuit imprimé en filigrane sur le flanc droit de la bande —
   le clin d'œil carte-mère de la refonte futuriste, sans gêner la lecture. */
.bande::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: var(--circuit);
  background-size: 440px 440px;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, black 78%);
  mask-image: linear-gradient(90deg, transparent 34%, black 78%);
}
.bande-empreinte { display: none; }
.bande .conteneur { position: relative; }
.points { gap: 22px 40px; grid-template-columns: repeat(2, minmax(280px, 1fr)); }
@media (max-width: 640px) { .points { grid-template-columns: 1fr; } }
.points .point {
  position: relative;
  padding: 22px 24px 22px 28px; border-radius: 14px;
  background: var(--verre-fond); border: 1px solid var(--bord);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.points .point::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  background: var(--jaune); border-radius: 3px; box-shadow: 0 0 10px var(--jaune-halo);
}
.points .point:hover { border-color: rgba(212, 168, 36, 0.4); background: var(--verre-fond-hover); transform: translateX(3px); }
.points .point h3 { color: var(--blanc); font-size: 17px; margin-bottom: 7px; font-weight: 700; }
.points .point p { color: var(--gris-souris); font-size: 15px; }

/* ---- Contact ---- */
.contact .carte { text-align: center; }
.contact .icone { margin: 0 auto; }
.carte.lien { display: block; text-decoration: none; color: inherit; }
.grand { color: var(--blanc) !important; font-size: 17px; font-weight: 700; margin-bottom: 3px; }

/* ---- Visuels latéraux (page GPS, pages service) ---- */
.heros-visuel { pointer-events: none; }
.heros-gauche { flex: 0 0 auto; width: min(420px, 36vw); height: auto; opacity: .9; margin-left: 4vw; margin-right: 8px; }
.heros-droite, .heros-droite-page {
  position: absolute; right: 48px; top: 50%; transform: translateY(-50%) rotate(4deg);
  width: min(215px, 17vw); height: auto; opacity: .22;
}
@media (max-width: 760px) { .heros-gauche, .heros-droite, .heros-droite-page { display: none; } }

/* ---- Pages service ---- */
.heros-page {
  min-height: auto; padding: 92px 0 64px;
  /* Même nettoyage que le héros d'accueil (retour PO 2026-08-02) : pas de
     voile jaune sur la zone du titre — fond sobre, jaune réservé à l'accent. */
  background: linear-gradient(165deg, var(--gris-clair-fond), var(--anthracite) 60%, var(--noir-profond));
}
.heros-page .heros-contenu { background: none; border: none; padding: 0; backdrop-filter: none; box-shadow: none; }
.retour {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--jaune); text-decoration: none; letter-spacing: normal; text-transform: none; font-size: 14px; font-weight: 600;
  transition: gap var(--transition);
}
.retour:hover { gap: 10px; text-decoration: none; }
.page-detail { max-width: 820px; }
.intro-page { font-size: 17px; color: var(--gris-souris); margin-bottom: 40px; }
.bloc-detail { margin-bottom: 40px; }
.bloc-detail h2 { font-size: 23px; text-align: left; margin-bottom: 14px; font-weight: 800; }
.bloc-detail h2::after { margin: 10px 0 0; }
.bloc-detail p { color: var(--gris-souris); }
.bloc-detail b { color: var(--blanc); }
.bloc-detail ul { padding-left: 22px; color: var(--gris-souris); }
.bloc-detail li { margin-bottom: 8px; }
.bloc-detail li::marker { color: var(--jaune); }
.bloc-detail a { color: var(--jaune); font-weight: 600; text-decoration: none; }
.bloc-detail a:hover { text-decoration: underline; }
.encadre-forts {
  position: relative;
  background: var(--verre-fond);
  border: 1px solid var(--bord); border-radius: 14px; padding: 26px 28px;
  backdrop-filter: blur(10px);
  box-shadow: var(--ombre);
}
.encadre-forts::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  background: var(--jaune); border-radius: 3px; box-shadow: 0 0 10px var(--jaune-halo);
}
.encadre-forts { padding-left: 30px; }
.cta-bas {
  position: relative; text-align: center; padding: 40px; border-radius: var(--rayon);
  background: linear-gradient(160deg, var(--anthracite-2), var(--anthracite)); border: 1px solid var(--bord);
}
.cta-bas p { font-size: 18px; margin-bottom: 18px; color: var(--blanc); font-weight: 600; }

/* ---- Page CCTV : mur de contrôle — flux caméras simulés (scènes
   abstraites en dégradés, HUD REC/horloge, zones de détection). Décoratif
   pur, aria-hidden côté HTML. ---- */
.sous-titre-mur { text-align: center; color: var(--gris-souris); max-width: 660px; margin: 0 auto 42px; }
.mur-cameras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .mur-cameras { grid-template-columns: 1fr; } }
.flux {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: 0;
  border-radius: 12px; border: 1px solid var(--bord);
  background: linear-gradient(180deg, #43454b, #35373c);
  box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition);
}
.flux:hover { border-color: rgba(212, 168, 36, 0.45); transform: translateY(-3px); }
/* Grille de scène + vignettage type capteur. */
.flux::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(24, 25, 28, 0.5)),
    linear-gradient(rgba(247, 248, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 248, 249, 0.05) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}
/* Lignes de balayage écran. */
.flux::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(20, 21, 24, 0.16) 0 1px, transparent 1px 3px);
}
.flux-scene { position: absolute; inset: 0; }
.scene-entree {
  background:
    linear-gradient(180deg, rgba(247, 248, 249, 0.10), rgba(247, 248, 249, 0.02)) 26% 12% / 17% 60% no-repeat,
    linear-gradient(180deg, rgba(247, 248, 249, 0.05), transparent) 60% 100% / 74% 32% no-repeat;
}
.scene-parking {
  background:
    repeating-linear-gradient(64deg, transparent 0 34px, rgba(247, 248, 249, 0.08) 34px 36px) 0 100% / 100% 46% no-repeat,
    radial-gradient(38% 30% at 32% 70%, rgba(247, 248, 249, 0.11), transparent 70%);
}
.flux-ir { background: linear-gradient(180deg, #4d4f55, #3b3d42); }
.scene-depot {
  background:
    linear-gradient(rgba(247, 248, 249, 0.11) 2px, transparent 2px) 0 24% / 100% 26% repeat-y,
    radial-gradient(70% 60% at 50% 40%, rgba(247, 248, 249, 0.13), transparent 75%);
}
.scene-caisse {
  background:
    linear-gradient(rgba(247, 248, 249, 0.09), rgba(247, 248, 249, 0.03)) 12% 80% / 44% 26% no-repeat,
    radial-gradient(30% 36% at 70% 46%, rgba(247, 248, 249, 0.10), transparent 70%);
}
/* Zone de détection analytique : cadre jaune à coins marqués + étiquette. */
.zone-detection {
  position: absolute; z-index: 2; pointer-events: none;
  border: 1px solid rgba(212, 168, 36, 0.45);
  background:
    linear-gradient(var(--jaune), var(--jaune)) left top / 12px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left top / 2px 12px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top / 12px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right top / 2px 12px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--jaune), var(--jaune)) right bottom / 2px 12px no-repeat;
  filter: drop-shadow(0 0 6px var(--jaune-halo));
  animation: viser 3.2s ease-in-out infinite;
}
.zone-detection span {
  position: absolute; top: -19px; left: -1px; padding: 3px 6px 2px; border-radius: 3px;
  font-family: Consolas, 'Courier New', monospace; font-size: 9.5px; line-height: 1;
  letter-spacing: 1.5px; white-space: nowrap;
  background: var(--jaune); color: var(--noir-profond);
}
.zd-entree { left: 20%; top: 28%; width: 28%; height: 48%; }
.zd-parking { left: 16%; top: 46%; width: 36%; height: 36%; }
.flux-hud {
  position: absolute; z-index: 3; top: 10px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: Consolas, 'Courier New', monospace; font-size: 10.5px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--blanc);
}
.flux-cam { display: inline-flex; align-items: center; gap: 7px; opacity: .92; white-space: nowrap; }
.flux-cam::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--jaune); box-shadow: 0 0 8px var(--jaune-halo);
  animation: clignoter 1.6s ease-in-out infinite;
}
.flux-rec { color: var(--jaune); animation: clignoter 1.2s steps(2, jump-none) infinite; }
.flux-pied {
  position: absolute; z-index: 3; bottom: 9px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; gap: 10px;
  font-family: Consolas, 'Courier New', monospace; font-size: 10px;
  letter-spacing: 1.5px; color: var(--gris-souris-2);
}

/* ---- Page CCTV : types de caméras (vignettes sous « Ce que nous installons ») ---- */
.types-cameras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 24px;
}
.type-camera {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 12px 16px; border-radius: 12px;
  background: var(--verre-fond); border: 1px solid var(--bord);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.type-camera:hover { border-color: rgba(212, 168, 36, 0.4); background: var(--verre-fond-hover); transform: translateY(-3px); }
.type-camera svg { width: 46px; height: 46px; margin-bottom: 4px; }
.type-camera b { color: var(--blanc); font-size: 14.5px; font-family: var(--police-titre); }
.type-camera small { color: var(--gris-souris-2); font-size: 12.5px; line-height: 1.5; }

/* ---- Page Alarme : supervision — panneau de la centrale (zones, LED)
   et pile de notifications téléphone. Décoratif pur, aria-hidden. ---- */
.panneau-alarme { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: start; }
.panneau-alarme > * { min-width: 0; }
@media (max-width: 760px) { .panneau-alarme { grid-template-columns: 1fr; } }
.centrale {
  border-radius: 12px; border: 1px solid var(--bord);
  background: linear-gradient(180deg, #43454b, #35373c);
  box-shadow: var(--ombre); padding: 16px 18px 8px;
}
.centrale-titre {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bord);
  font-family: Consolas, 'Courier New', monospace; font-size: 11px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--blanc);
}
/* Sur petit écran le titre peut être long : on le laisse replier au lieu
   de faire déborder le panneau (nowrap hérité de .flux-cam). */
.centrale-titre .flux-cam { white-space: normal; }
.centrale-mode {
  background: var(--jaune); color: var(--noir-profond); border-radius: 3px;
  padding: 3px 8px 2px; font-size: 10px; letter-spacing: 1.5px; white-space: nowrap;
}
.zone-ligne {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-bottom: 1px dashed rgba(247, 248, 249, 0.08);
  font-family: Consolas, 'Courier New', monospace; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris-souris);
}
.zone-ligne:last-child { border-bottom: none; }
.zone-led { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--gris-souris-2); }
.zone-led.armee { background: var(--jaune); box-shadow: 0 0 8px var(--jaune-halo); }
.zone-led.alerte {
  background: var(--jaune-vif); box-shadow: 0 0 12px var(--jaune-halo);
  animation: clignoter .7s steps(2, jump-none) infinite;
}
.zone-nom { flex: 1; }
.zone-etat { font-size: 11px; color: var(--gris-souris-2); white-space: nowrap; }
.zone-ligne.alerte .zone-nom, .zone-ligne.alerte .zone-etat { color: var(--jaune); }
.notif-titre {
  font-family: Consolas, 'Courier New', monospace; font-size: 10.5px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--gris-souris-2);
  margin-bottom: 2px;
}
.notifications { display: grid; gap: 12px; align-content: start; }
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 12px; border: 1px solid var(--bord); background: var(--verre-fond);
  box-shadow: var(--ombre); padding: 13px 14px;
}
.notif.urgence { border-color: rgba(212, 168, 36, 0.5); background: var(--jaune-teinte); }
.notif svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.notif-corps { flex: 1; min-width: 0; }
.notif-corps b { display: block; color: var(--blanc); font-size: 13.5px; font-family: var(--police-titre); }
.notif-corps small { color: var(--gris-souris-2); font-size: 12px; line-height: 1.5; }
.notif-heure {
  font-family: Consolas, 'Courier New', monospace; font-size: 10px;
  letter-spacing: 1px; color: var(--gris-souris-2); white-space: nowrap; margin-top: 3px;
}
.notif.urgence .notif-heure, .notif.urgence .notif-corps b { color: var(--jaune); }

/* ---- Pied de page ---- */
.pied { background: linear-gradient(180deg, var(--anthracite), var(--noir-profond)); border-top: 1px solid var(--bord); color: var(--gris-souris); }
.pied-haut {
  display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 36px;
  padding: 56px 20px 32px;
}
.pied-col h4 { color: var(--blanc); margin-bottom: 12px; font-size: 16px; font-weight: 800; }
.pied-col h4::after {
  content: ""; display: block; width: 28px; height: 3px; background: var(--jaune);
  margin-top: 8px; border-radius: 2px; box-shadow: 0 0 10px var(--jaune-halo);
}
.pied-col p { font-size: 14px; line-height: 2; }
.pied-col a { color: var(--gris-souris); text-decoration: none; transition: color var(--transition); }
.pied-col a:hover { color: var(--jaune); }
.pied-carte iframe {
  width: 100%; height: 170px; border: 1px solid var(--bord); border-radius: 12px;
  filter: grayscale(60%) invert(92%) contrast(90%);
}
.pied-itineraire { display: inline-block; margin-top: 10px; color: var(--jaune) !important; font-weight: 600; font-size: 13px; }
.sociaux { display: flex; gap: 10px; margin-top: 14px; }
.sociaux a {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--verre-fond); border: 1px solid var(--bord);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.sociaux a:hover { background: var(--jaune); border-color: var(--jaune); transform: translateY(-3px); box-shadow: 0 8px 20px -6px var(--jaune-halo); }
.sociaux svg { width: 19px; height: 19px; fill: var(--gris-souris); transition: fill var(--transition); }
.sociaux a:hover svg { fill: var(--noir-profond); }
.pied-barre {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: var(--gris-souris-2); font-size: 14px;
  border-top: 1px solid var(--bord); padding-top: 18px; padding-bottom: 24px;
}
.pied-barre a { color: var(--jaune); text-decoration: none; font-weight: 600; }
.pied-barre a:hover { text-decoration: underline; }

/* ---- Apparition au défilement (repli CSS si GSAP indisponible) ---- */
.apparait { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.apparait.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; transition: none; }
  .anneau-1, .anneau-2, .anneau-3, .halo-coeur, .particule, .trait-scan { animation: none !important; }
  .heros::after { animation: none !important; opacity: 0 !important; }
  .heros-contenu::before, .surtitre::before, .hud-tag .temoin { animation: none !important; }
  .flux-cam::before, .flux-rec, .zone-detection, .zone-led.alerte { animation: none !important; }
}

@media (max-width: 900px) {
  .heros-centre { padding: 0; }
}
@media (max-width: 800px) {
  .pied-haut { grid-template-columns: 1fr; }
  .logo-mark { height: 40px; }
}
@media (max-width: 640px) {
  .navigation { gap: 14px; font-size: 14px; }
  .navigation a:not(.bouton-nav):nth-child(2) { display: none; }
}
/* Très petit écran : sans cela la barre déborde (447 px pour 390) et le
   bouton Contact sort de l'écran. Espace GPS reste accessible en pied. */
@media (max-width: 480px) {
  .navigation { gap: 10px; }
  .navigation a[href^="https://gps."] { display: none; }
}
@media (max-width: 640px) {
  .heros { padding: 110px 0 60px; min-height: auto; }
  .heros-visuel svg { width: 130vw; }
  .heros-centre { padding: 0; }
  /* Le cadre de visée se resserre pour rester dans l'écran. */
  .heros-contenu::before {
    inset: -18px -10px;
    background:
      linear-gradient(var(--jaune), var(--jaune)) left top    / 20px 2px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) left top    / 2px 20px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) right top   / 20px 2px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) right top   / 2px 20px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) left bottom / 20px 2px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) left bottom / 2px 20px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) right bottom / 20px 2px no-repeat,
      linear-gradient(var(--jaune), var(--jaune)) right bottom / 2px 20px no-repeat;
  }
}

/* Icône panier de la barre de navigation — visible seulement quand le
   panier contient des articles (script léger en pied de page). */
[hidden] { display: none !important; }
.navigation .panier-nav { font-size: 1.1rem; text-decoration: none; position: relative; }
.badge-panier {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 3px;
  background: var(--jaune); color: var(--noir-profond); border-radius: 99px;
  font-size: .7rem; font-weight: 700; text-align: center; vertical-align: 6px;
}

/* ---- Aymen Meuble (2026-09-12) : logo image et catégories ---- */
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque .logo-img { height: 46px; width: auto; display: block; }
.marque .nom-marque { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; color: var(--blanc); letter-spacing: .3px; }
.marque .nom-marque b { color: var(--jaune); font-weight: 800; }
.logo-heros { display: block; height: 150px; width: auto; margin: 0 auto 18px; filter: drop-shadow(0 8px 30px rgba(212, 168, 36, .35)); }
.carte-categorie .icone svg { width: 34px; height: 34px; fill: none; stroke: var(--jaune); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.grille-categories { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Sur telephone, le logo suffit : le nom ecrit poussait le menu sur deux lignes. */
@media (max-width: 520px) { .marque .nom-marque { display: none; } .marque .logo-img { height: 40px; } }
#commander .actions { justify-content: center; }
/* `.heros-page .heros-contenu { padding: 0 }` retire aussi la marge du
   conteneur : sur telephone le titre de la boutique touchait le bord. */
@media (max-width: 760px) { .heros-page .heros-contenu { padding-left: 20px; padding-right: 20px; } }