/* =========================================================
   L&J EXCHANGE — feuille de style principale
   ========================================================= */

:root{
  /* --- Arcade directory palette -------------------------------------
     Base : une salle de bornes sombre, quelques accents chauds rares.
     Les photos de machines portent deja la couleur : l'interface reste
     sombre et discrete pour laisser ressortir les visuels.            */

  /* BASE */
  --cabinet-black:#0D0B14;   /* fond de page             */
  --coin-slot:#171425;       /* cartes, lignes de liste  */
  --bezel:#221E36;           /* survol, champs, chips    */
  --seam:#372F52;            /* bordures, separateurs    */

  /* ACCENT - a garder rares (regle "Keep neon rare") */
  --marquee-pink:#FF3D8A;    /* action principale, logo        */
  --screen-cyan:#2BE0E5;     /* liens, filtres actifs, reperes */
  --coin-gold:#FFC24B;       /* notes, rarete, prix            */
  --attract-violet:#8B5CF6;  /* tags de genre, categories      */

  /* STATUS - porteurs de sens, jamais decoratifs */
  --player-green:#4ADE80;    /* en service, ouvert     */
  --gameover-red:#FF5A4E;    /* hors service, ferme    */

  /* TEXTE */
  --phosphor:#F5F2FF;        /* texte principal        */
  --dust:#9C95BF;            /* texte secondaire, meta */

  /* Texte tres sombre pose sur les pastilles et boutons pleins
     (jamais de blanc sur un aplat rose / cyan / or / vert) */
  --on-pink:#2C0011;
  --on-cyan:#04262B;
  --on-gold:#412402;
  --on-green:#04342C;
  /* La carte d'exemple du PDF pose du blanc sur le violet (3.84:1), mais la
     regle ecrite dit "toujours un texte tres sombre sur les aplats, jamais
     du blanc". On suit la regle : 4.56:1. */
  --on-violet:#12062B;

  /* Voiles pour les fonds teintes */
  --pink-soft:rgba(255,61,138,.14);
  --cyan-soft:rgba(43,224,229,.14);
  --violet-soft:rgba(139,92,246,.16);
  --green-soft:rgba(74,222,128,.12);

  /* --- Alias utilises par le reste de la feuille de style --- */
  --bg:var(--cabinet-black);
  --bg-alt:var(--coin-slot);
  --surface:var(--coin-slot);
  --surface-2:var(--bezel);
  --border:var(--seam);
  --text:var(--phosphor);
  --text-muted:var(--dust);
  --header:rgba(13,11,20,.82);
  --accent:var(--marquee-pink);
  --accent-dark:#F52C7B;
  --accent-soft:var(--pink-soft);
  --link:var(--screen-cyan);
  --success:var(--player-green);
  --danger:var(--gameover-red);
  --price:var(--coin-gold);
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins',Inter,system-ui,sans-serif;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--text);
}
p{margin:0 0 1em;color:var(--text-muted);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.muted{color:var(--text-muted);}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease,
             border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
/* Rose marquee = action principale, texte tres sombre sur l'aplat. */
.btn-primary{background:var(--marquee-pink);color:var(--on-pink);box-shadow:0 6px 18px rgba(255,61,138,.28);}
.btn-primary:hover{background:var(--accent-dark);box-shadow:0 8px 26px rgba(255,61,138,.4);transform:translateY(-2px);}
/* Bouton secondaire : contour "seam", texte phosphore, aucun neon. */
.btn-outline{background:transparent;border-color:var(--seam);color:var(--phosphor);}
.btn-outline:hover{background:var(--bezel);border-color:var(--dust);color:var(--phosphor);}
.btn-ghost{background:var(--surface-2);color:var(--text);}
.btn-ghost:hover{background:var(--seam);}
/* Contour "player one" au repos, aplat plein au survol
   (texte tres sombre sur l'aplat : 7.86:1).
   Le fond de repos est un vert d'alpha 0, pas "transparent" : transparent
   vaut rgba(0,0,0,0), et le fondu passerait alors par un gris sale avant
   d'arriver au vert. Ici la teinte est deja la, seule l'opacite monte.
   Remplissage lent (.45s) mais lift rapide (.2s) : le bouton reste vif. */
.btn-green{
  background:rgba(74,222,128,0);
  border-color:var(--player-green);color:var(--player-green);
  transition:background-color .45s ease, color .45s ease,
             box-shadow .45s ease, border-color .25s ease, transform .2s ease;
}
.btn-green:hover{
  background:var(--player-green);color:var(--on-green);
  box-shadow:0 8px 26px rgba(74,222,128,.34);transform:translateY(-2px);
}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:.85rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;background:var(--marquee-pink);
  color:var(--on-pink);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 4px 14px rgba(255,61,138,.3);
}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-weight:500;color:var(--text-muted);font-size:.95rem;transition:color .15s;}
.nav-links a:hover{color:var(--phosphor);}
.nav-links a.active{color:var(--link);}  /* page courante = cyan ecran */
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-burger{display:none;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font-size:1.1rem;}

.cart-btn{
  position:relative;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  padding:9px 16px;border-radius:999px;font-weight:600;font-size:.9rem;
  transition:border-color .15s, color .15s;
}
.cart-btn:hover{border-color:var(--link);color:var(--link);}
.cart-badge{
  position:absolute;top:-8px;right:-8px;
  background:var(--marquee-pink);color:var(--on-pink);
  font-size:.7rem;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;
  display:none;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 0 0 3px var(--bg);
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:120px 0 100px;
  /* Repli si la video ne se charge pas : meme photo qu'avant, assombrie. */
  text-align:center;
}
/* Video plein cadre derriere le voile, comme un ecran d'attract-mode.
   Legerement eclaircie pour qu'elle reste vive sous le voile. */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(1.15) saturate(1.1);
  pointer-events:none; /* empeche tout tap d'invoquer les controles natifs */
}
/* Sur iPhone en mode economie d'energie, Safari bloque l'autoplay et pose
   un bouton play/pause natif par-dessus la video (meme sans l'attribut
   "controls"). On le masque : la video (ou son poster) reste affichee,
   juste sans l'icone. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Image de secours (identique au poster) : reste cachee, affichee par le
   script uniquement si iOS bloque/coupe la lecture. Jamais de bouton natif
   possible sur une simple <img>. */
.hero-video-fallback{
  display:none;
  object-fit:cover;object-position:center;
}
/* Voile directionnel : discret a gauche pour porter le texte (4.5:1 garanti),
   quasi transparent a droite pour laisser la video respirer. */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(13,11,20,.78) 0%,
    rgba(13,11,20,.62) 30%,
    rgba(13,11,20,.28) 60%,
    rgba(13,11,20,.42) 100%);
}
/* Nappes de neon qui derivent lentement, comme des enseignes d'arcade
   dans la brume d'une salle sombre. Couleurs de la charte uniquement. */
.hero-glow{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(46% 42% at 12% 20%, var(--pink-soft), transparent 70%),
    radial-gradient(42% 38% at 88% 82%, var(--cyan-soft), transparent 70%);
  animation:hero-drift 20s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes hero-drift{
  0%,100%{opacity:.6;transform:translate(-4%,0) scale(1);}
  50%{opacity:.95;transform:translate(4%,-3%) scale(1.08);}
}
/* Vignette : assombrit les bords, concentre le regard au centre-gauche. */
.hero-vignette{
  position:absolute;inset:0;z-index:3;
  box-shadow:inset 0 0 160px 40px rgba(13,11,20,.55);
  pointer-events:none;
}
/* Grain fin (bruit SVG) pour une texture cinema plutot qu'un aplat plat. */
.hero-grain{
  position:absolute;inset:0;z-index:4;
  opacity:.15;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Fondu en pied de section : la video se dissout dans le fond "cabinet black"
   pour enchainer sans coupure sur la section Services. */
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  height:min(280px,45%);
  background:linear-gradient(to bottom, transparent, var(--cabinet-black));
  pointer-events:none;
}
.hero-content{position:relative;z-index:6;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:999px;border:1px solid var(--seam);
  background:var(--violet-soft);color:var(--attract-violet);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.4rem);
  max-width:820px;margin:0 auto .6em;
  color:var(--phosphor);
}
/* Rose marquee : la voix de la marque, plus le CTA juste en dessous.
   Ce sont les deux seuls roses de cet ecran.
   Neon leger et constant, avec un clignotement d'enseigne : on n'anime
   que l'opacite (jamais le text-shadow lui-meme) pour eviter les
   rectangles de repaint autour des mots. */
.hero h1 span{
  color:var(--marquee-pink);
  text-shadow:0 0 10px rgba(255,61,138,.45), 0 0 26px rgba(255,61,138,.28);
  animation:marquee-flicker 6s infinite;
  /* background-color: white; */
  /* -webkit-text-stroke: 0.4px black; */
}
@keyframes marquee-flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}
  20%,24%,55%{opacity:.82;}
}
.hero p.lead{
  max-width:640px;
  margin:0 auto 2.2em;
  font-size:1.08rem;
  color:var(--phosphor);opacity:.86;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* Sur grand ecran, le texte glisse vers la gauche pour laisser la video
   respirer a droite, comme un ecran cinema derriere le pitch. */
@media (min-width:880px){
  .hero{text-align:left;}
  .hero-content{max-width:640px;margin-left:clamp(8px,4vw,64px);margin-right:auto;}
  .hero-actions{justify-content:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .hero-glow, .hero h1 span{animation:none;}
}
/* From Uiverse.io by btongheng */

/* ---------- sections ---------- */
section{padding:80px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.section-eyebrow{color:var(--attract-violet);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:block;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);}

/* ---------- services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.service-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 28px 32px;overflow:hidden;transition:transform .2s, border-color .2s, box-shadow .2s;
}
/* Carte cliquable : redirige vers la page du service correspondant. */
.service-card:hover{transform:translateY(-6px);background:var(--bezel);border-color:var(--dust);box-shadow:var(--shadow);}
.service-img{
  display:block;margin:0 auto 20px;max-width:120px;max-height:110px;width:auto;height:auto;object-fit:contain;
}
.service-card h3{font-size:1.2rem;margin-bottom:.4em;}
.service-card p{margin:0;font-size:.95rem;}

/* ---------- CTA split ---------- */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cta-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  /* Liseré violet : ce sont deux categories de catalogue. */
  padding:44px 36px;border:1px solid var(--border);border-left:4px solid var(--attract-violet);
  background:var(--surface);
}
.cta-card h3{font-size:1.5rem;}
.cta-card p{max-width:420px;}
.cta-card .btn{margin-top:8px;}

/* ---------- promo text ---------- */
.promo{
  background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.promo-box{
  max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:44px clamp(24px,5vw,56px);box-shadow:var(--shadow);
}
.promo-box p{color:var(--text);font-size:1.02rem;}
.promo-box strong{color:var(--marquee-pink);}  /* nom de marque = logo */
.promo-list{margin:20px 0;display:grid;gap:10px;}
.promo-list li{
  display:flex;gap:10px;align-items:flex-start;color:var(--text);font-weight:500;
}

/* ---------- legal page ---------- */
.legal-box h2{
  font-size:1.2rem;color:var(--phosphor);margin:32px 0 10px;
}
.legal-box h2:first-child{margin-top:0;}
.legal-box p{margin:0 0 10px;line-height:1.6;}
.legal-list{margin:0 0 10px;padding-left:20px;color:var(--text);}
.legal-list li{margin-bottom:6px;}
/* Vert "player one" : toujours accompagne du mot, jamais la couleur seule. */
.promo-list li::before{content:"✓";color:var(--player-green);font-weight:800;}

/* ---------- distributeur vape / puff ---------- */
/* Categorie dediee, juste sous le hero. Meme fond que le reste de la page
   (pas de bande "bg-alt") pour rester dans la continuite visuelle. */
.vape-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.vape-content .section-eyebrow{margin-bottom:14px;}
.vape-content h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:0 0 16px;}
.vape-content .lead{margin:0 0 26px;max-width:520px;}
.vape-features{display:grid;gap:12px;margin:0 0 32px;}
.vape-features li{
  display:flex;gap:10px;align-items:flex-start;color:var(--text);font-weight:500;font-size:.96rem;
}
/* Cyan "screen" plutot que le vert "player one" : ce sont des atouts produit,
   pas un statut en service / hors service. */
.vape-features li::before{content:"✓";color:var(--screen-cyan);font-weight:800;flex:none;}
.vape-visual{position:relative;display:flex;justify-content:center;align-items:center;}
.vape-glow{
  position:absolute;inset:-10%;
  background:radial-gradient(closest-side, var(--cyan-soft), transparent 70%),
             radial-gradient(closest-side at 65% 75%, var(--pink-soft), transparent 65%);
  filter:blur(6px);pointer-events:none;
}
.vape-img{
  position:relative;display:block;max-width:340px;width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
@media (max-width:880px){
  .vape-grid{grid-template-columns:1fr;gap:36px;}
  .vape-img{max-width:240px;}
  .vape-content .lead{max-width:none;}
}

/* -- bloc video en fond + texte en degrade, sous le premier bloc -- */
.vape-info-block{
  position:relative;margin-top:72px;min-height:560px;
  display:flex;align-items:center;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);background:#000;
}
.vape-info-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Degrade sombre depuis la gauche (cote texte) vers transparent a droite,
   pour lire le texte sans plaquer un voile uniforme sur toute la video. */
.vape-info-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(13,11,20,.96) 0%, rgba(13,11,20,.9) 22%,
    rgba(13,11,20,.6) 48%, rgba(13,11,20,.12) 70%);
}
.vape-faq{position:relative;z-index:2;display:grid;gap:26px;max-width:560px;padding:48px clamp(24px,5vw,56px);}
.vape-faq h3{font-size:1.45rem;margin:0 0 10px;color:var(--phosphor);}
.vape-faq p{margin:0;color:var(--text-muted);font-size:1.08rem;line-height:1.6;}
.vape-faq p + p{margin-top:12px;}
.vape-faq strong{color:var(--phosphor);}
.vape-faq em{color:var(--dust);}
@media (max-width:880px){
  .vape-info-block{margin-top:36px;min-height:0;align-items:flex-end;}
  /* Recadrage cover en colonne etroite : le sujet (distributeur + personnage)
     est dans la moitie droite de la source, le reste est un fond noir uni.
     On centre le point focal dessus (65%) plutot que sur le vide a gauche,
     sinon en format telephone on ne voit plus que du noir. */
  .vape-info-bg{object-position:65% center;}
  /* En colonne etroite le texte prend toute la largeur : degrade vertical,
     sombre et dense en bas, pour rester lisible sur n'importe quelle image. */
  .vape-info-overlay{
    background:linear-gradient(180deg,
      rgba(13,11,20,.35) 0%, rgba(13,11,20,.75) 45%, rgba(13,11,20,.97) 75%);
  }
  .vape-faq{max-width:none;padding:120px 20px 32px;}
}

/* -- trois arguments de confiance -- */
.vape-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.vape-trust-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 24px 28px;
}
.vape-trust-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.vape-trust-icon{
  width:44px;height:44px;flex:none;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.vape-trust-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--screen-cyan);}
.vape-trust-card h3{font-size:1.15rem;margin:0 0 10px;}
.vape-trust-card p{margin:0;color:var(--text-muted);font-size:.92rem;}
/* Pastille "verifie" : vert player-one, jamais la couleur seule (symbole
   coche visible dedans, cf. regle "toujours accompagne du mot ou d'un signe"). */
.vape-trust-badge{
  position:absolute;top:20px;right:20px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--player-green);color:var(--player-green);font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.vape-trust-cta{text-align:center;margin-top:40px;}
@media (max-width:880px){
  .vape-trust-grid{grid-template-columns:1fr;margin-top:40px;}
}

/* ---------- specs table ---------- */
.specs-table{
  display:grid;gap:0;margin-top:32px;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface);
}
.specs-row{
  display:grid;grid-template-columns:1fr 1.4fr;
  border-bottom:1px solid var(--border);
}
.specs-row:last-child{border-bottom:none;}
.specs-row:nth-child(odd){background:var(--bg-alt);}
.specs-label{padding:16px 20px;font-weight:600;color:var(--phosphor);font-size:.92rem;}
.specs-value{padding:16px 20px;color:var(--text-muted);font-size:.92rem;}
@media (max-width:600px){
  .specs-row{grid-template-columns:1fr;}
  .specs-label{padding-bottom:4px;}
  .specs-value{padding-top:0;}
}

/* ---------- page puff : accent violet dedie ---------- */
.puff-page{
  --attract-violet:#8f5cd5;
  --violet-soft:rgba(143,92,213,.16);
}
.puff-page .page-hero{
  background:radial-gradient(circle at 50% 0%, var(--violet-soft), transparent 65%), var(--bg-alt);
}
.puff-page .btn-primary{
  background:var(--attract-violet);color:var(--on-violet);
  box-shadow:0 6px 18px rgba(143,92,213,.32);
}
.puff-page .btn-primary:hover{
  background:#7c47c4;box-shadow:0 8px 26px rgba(143,92,213,.42);
}
.puff-page .vape-trust-label{color:var(--attract-violet);}
.puff-page .vape-trust-icon{border-color:var(--attract-violet);color:var(--attract-violet);}
.puff-page .specs-row:nth-child(odd){background:var(--violet-soft);}
.puff-page .specs-label{color:var(--attract-violet);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:48px 0 28px;background:var(--bg-alt);}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px;}
.footer-col h4{font-size:.95rem;color:var(--text);margin-bottom:12px;}
.footer-col p, .footer-col a{font-size:.9rem;color:var(--text-muted);}
.footer-col a{display:block;margin-bottom:6px;transition:color .15s;}
.footer-col a:hover{color:var(--link);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center;font-size:.82rem;color:var(--text-muted);}

/* ---------- page header (catalogues) ---------- */
.page-hero{
  padding:56px 0 40px;text-align:center;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.6rem);}
.page-hero p{max-width:560px;margin:0 auto;}

/* ---------- filters ---------- */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:28px 0 4px;
}
.filter-chip{
  padding:8px 18px;border-radius:999px;border:1px solid var(--border);
  background:var(--bezel);color:var(--text-muted);font-size:.85rem;font-weight:600;
  transition:all .15s;
}
.filter-chip:hover{background:var(--bezel);color:var(--phosphor);border-color:var(--dust);}
/* Filtre actif = cyan ecran, texte tres sombre sur l'aplat. */
.filter-chip.active{background:var(--screen-cyan);color:var(--on-cyan);border-color:var(--screen-cyan);}

/* ---------- product grid ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:24px;padding:40px 0 80px;
}
.product-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s, border-color .2s, box-shadow .2s;
}
/* Carte navigable : liseré cyan au survol, un seul a la fois. */
.product-card:hover{transform:translateY(-4px);border-color:var(--screen-cyan);box-shadow:var(--shadow);}
.product-media{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-size:3.4rem;position:relative;background:var(--surface-2);
  border-bottom:1px solid var(--border);overflow:hidden;
}
.product-media .tag{
  position:absolute;top:10px;left:10px;background:var(--attract-violet);
  color:var(--on-violet);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;
}
.product-image{
  padding:20px;box-sizing:border-box;
  width:100%;height:100%;object-fit:contain;
}
.product-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-body h3{font-size:1.05rem;margin:0;}
.product-body p{font-size:.86rem;margin:0;flex:1;}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px;}
/* Or "coin gold" : prix, notes, rarete. Rien d'autre. */
.price{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;color:var(--coin-gold);}
.price small{color:var(--text-muted);font-weight:500;font-size:.7rem;}

/* ---------- boutons "Ajouter" des cartes ----------
   Au repos : vert "player one" en contour. Au survol : rose marquee.
   Le rose ne sort qu'au survol, donc un seul a la fois dans le viewport :
   la regle "Keep neon rare" tient toujours sur un catalogue de ~30 cartes.
   (Le vert au repos est un choix produit demande, pas la lecture stricte
   de la palette, ou le vert est reserve au statut "en service".)          */
.product-card .btn-primary,
.cart-row .btn-primary{
  background:transparent;border-color:var(--player-green);color:var(--player-green);
  box-shadow:none;
}
.product-card .btn-primary:hover,
.cart-row .btn-primary:hover{
  background:var(--bezel);border-color:var(--marquee-pink);color:var(--marquee-pink);
  box-shadow:none;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--phosphor);color:var(--cabinet-black);
  padding:14px 22px;border-radius:999px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s ease;z-index:200;
  display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- panier ---------- */
.cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start;padding:48px 0 90px;}
.cart-items{display:flex;flex-direction:column;gap:14px;}
.cart-row{
  display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 16px;
}
.cart-row .icon{width:56px;height:56px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.7rem;}
.cart-row .info h4{margin:0 0 4px;font-size:1rem;}
.cart-row .info span{font-size:.78rem;color:var(--text-muted);}
.qty-control{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:999px;padding:4px;}
.qty-control button{width:26px;height:26px;border-radius:999px;border:none;background:transparent;color:var(--text);font-size:1rem;}
.qty-control button:hover{background:var(--seam);}
.qty-control span{min-width:18px;text-align:center;font-weight:700;font-size:.9rem;}
.remove-btn{background:none;border:none;color:var(--text-muted);font-size:1.2rem;padding:4px;}
.remove-btn:hover{color:var(--gameover-red);}
.cart-line-price{font-weight:700;color:var(--coin-gold);font-family:'Poppins',sans-serif;white-space:nowrap;}

.cart-empty{
  text-align:center;padding:70px 24px;background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-lg);
}
.cart-empty .emoji{font-size:3rem;margin-bottom:16px;}

.summary-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;position:sticky;top:96px;
}
.summary-card h3{font-size:1.1rem;}
.summary-row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--text-muted);padding:8px 0;}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:16px;font-size:1.1rem;color:var(--text);font-weight:700;}
.summary-row.total .price{font-size:1.3rem;}

.contact-form{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.82rem;font-weight:600;color:var(--text-muted);}
.field input,.field textarea{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 14px;color:var(--text);font-family:inherit;font-size:.92rem;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--dust);opacity:.8;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--screen-cyan);box-shadow:0 0 0 3px var(--cyan-soft);}
.form-note{font-size:.78rem;color:var(--text-muted);}
.form-success{
  display:none;background:var(--green-soft);border:1px solid var(--player-green);color:var(--player-green);
  padding:14px 16px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;margin-top:14px;
}
.form-success.show{display:block;}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav-links{display:none;}
  .nav-burger{display:inline-flex;}
  .services-grid{grid-template-columns:1fr;}
  .cta-split{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .summary-card{position:static;}
}
@media (max-width:520px){
  .cart-row{grid-template-columns:48px 1fr;grid-template-areas:"icon info" "qty qty" "price remove";}
  .cart-row .icon{grid-area:icon;}
  .cart-row .info{grid-area:info;}
  .cart-row .qty-control{grid-area:qty;justify-self:start;margin-top:8px;}
  .cart-row .cart-line-price{grid-area:price;}
  .cart-row .remove-btn{grid-area:remove;justify-self:end;}
}

/* ---------- reveal au scroll ---------- */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.2s cubic-bezier(.16,.8,.24,1), transform 1.2s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--rd,0s);
  will-change:opacity, transform;
}
.js-reveal [data-reveal].is-visible{opacity:1;transform:translateY(0);}

.js-reveal [data-reveal-text] .word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.js-reveal [data-reveal-text] .word{
  display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform 1.3s cubic-bezier(.16,.8,.24,1), opacity .9s ease;
  transition-delay:var(--wd,0s);
  will-change:opacity, transform;
}
.js-reveal [data-reveal-text].is-visible .word{transform:translateY(0);opacity:1;}

@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-text] .word{transition:none !important;}
}

/* ---------- mobile nav drawer ---------- */
.nav-drawer{
  display:none;flex-direction:column;gap:2px;background:var(--bg-alt);
  border-bottom:1px solid var(--border);padding:10px 24px 18px;
}
.nav-drawer.open{display:flex;}
.nav-drawer a{padding:12px 4px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);}
.nav-drawer a:last-child{border-bottom:none;}

/* =========================================================
   MODE CLAIR (optionnel) - valeurs de la palette
   "Do not invert" : on garde les memes teintes et on assombrit
   les accents, plutot que d'inverser la version sombre.
   Non actif par defaut : ajouter data-theme="light" sur <html>.
   ========================================================= */
html[data-theme="light"]{
  color-scheme:light;

  --cabinet-black:#FAF8F5;   /* page   */
  --coin-slot:#EFEBF5;       /* cartes */
  --bezel:#E4DFEE;
  --seam:#D3CBE2;

  --marquee-pink:#C81E63;
  --screen-cyan:#0E7C86;
  --coin-gold:#946200;
  --attract-violet:#6D3EE0;

  /* Le PDF ne donne pas de variante claire pour les couleurs de statut :
     assombries ici selon la meme methode que les 4 accents ci-dessus,
     pour rester lisibles sur fond clair (>= 4.5:1). */
  --player-green:#16794A;
  --gameover-red:#C4362B;

  --phosphor:#1A1721;        /* texte principal   */
  --dust:#5B5470;            /* texte secondaire  */

  /* Les aplats restent sombres dessous : on garde du texte clair dessus. */
  --on-pink:#FFF5F9;
  --on-cyan:#F0FCFD;
  --on-gold:#FFF8EC;
  --on-green:#F2FFF7;
  --on-violet:#F7F3FF;

  --pink-soft:rgba(200,30,99,.10);
  --cyan-soft:rgba(14,124,134,.12);
  --violet-soft:rgba(109,62,224,.10);
  --green-soft:rgba(27,143,77,.10);

  --header:rgba(250,248,245,.86);
  --accent-dark:#A81450;
  --shadow:0 14px 32px rgba(26,23,33,.12);
}

/* =========================================================
   FICHE PRODUIT DÉTAILLÉE (modale paysage)
   Ouverte au clic sur une carte du catalogue.
   N'utilise que les variables communes aux trois thèmes.
   ========================================================= */

/* ---------- carte cliquable ---------- */
.product-card{cursor:pointer;}
.product-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.card-hint{
  font-size:.75rem;font-weight:600;color:var(--accent);
  opacity:0;transition:opacity .18s ease;
}
.product-card:hover .card-hint,
.product-card:focus-visible .card-hint{opacity:1;}
/* Sur écran tactile il n'y a pas de survol : l'indice reste visible. */
@media (hover:none){.card-hint{opacity:.75;}}

/* ---------- fond de la modale ---------- */
.product-modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease;
}
.product-modal.open{opacity:1;}
/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus, sinon la
   fiche fermee reste un calque plein ecran qui intercepte tous les clics. */
.product-modal[hidden]{display:none;}
/* Pendant le fondu de fermeture, la fiche ne doit plus capter les clics.
   Classe posee de facon synchrone a la fermeture : ne depend pas d'une frame. */
.product-modal.closing{pointer-events:none;}
body.modal-open{overflow:hidden;}

/* Le toast doit rester lisible au-dessus de la fiche. */
.toast{z-index:400;}

/* ---------- carte paysage ---------- */
.product-modal-card{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-rows:minmax(0,1fr);
  width:min(980px,100%);max-height:min(86vh,700px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateY(14px) scale(.985);
  transition:transform .22s ease;
}
.product-modal.open .product-modal-card{transform:none;}

/* ---------- volet visuel (gauche) ---------- */
.modal-media{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:40px 28px;
  background:var(--surface-2);border-right:1px solid var(--border);min-height:0;
}
.modal-media .tag{
  position:absolute;top:16px;left:16px;
  font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:999px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
}
.modal-icon{font-size:6.5rem;line-height:1;}
.modal-price{font-size:1.75rem;}

/* ---------- bouton de fermeture ---------- */
.modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:1rem;line-height:1;transition:border-color .15s, color .15s;
}
.modal-close:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- contenu (droite) ---------- */
.modal-content{padding:34px 34px 34px 30px;overflow-y:auto;min-height:0;}
.modal-content h3{font-size:1.45rem;margin:0 0 12px;padding-right:44px;}
.modal-lead{font-size:.94rem;margin:0;color:var(--text-muted);}

.modal-section{margin-top:24px;padding:0;}
.modal-section h4{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-muted);margin:0 0 12px;
}

.feature-list{display:flex;flex-direction:column;gap:9px;}
.feature-list li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.45;}
.feature-list li::before{
  content:"▸";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;
}

.spec-list{margin:0;border-top:1px solid var(--border);}
.spec-row{
  display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:.87rem;
}
.spec-row dt{margin:0;color:var(--text-muted);}
.spec-row dd{margin:0;font-weight:500;}

.modal-service{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.modal-service div{
  flex:1 1 190px;display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.modal-service span{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);
}
.modal-service strong{font-size:.87rem;font-weight:600;}

.modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* ---------- format portrait / mobile ---------- */
@media (max-width:800px){
  .product-modal{padding:14px;}
  .product-modal-card{
    grid-template-columns:1fr;grid-template-rows:auto auto;max-height:92vh;overflow-y:auto;
  }
  .modal-media{
    padding:28px 20px;gap:14px;
    border-right:none;border-bottom:1px solid var(--border);
  }
  .modal-icon{font-size:4.5rem;}
  .modal-price{font-size:1.45rem;}
  .modal-content{padding:26px 22px 30px;overflow-y:visible;}
  .modal-content h3{font-size:1.25rem;}
  .spec-row{grid-template-columns:1fr;gap:2px;}
  .modal-actions .btn{flex:1 1 100%;}
}

@media (prefers-reduced-motion:reduce){
  .product-modal,
  .product-modal-card,
  .card-hint{transition:none;}
  .product-modal-card{transform:none;}
}

/* ---------- fiche produit (page dédiée, ouverte dans un onglet) ---------- */
.fiche-page{padding:36px 0 80px;}
.fiche-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:600;color:var(--text-muted);
  margin-bottom:22px;transition:color .15s;
}
.fiche-back:hover{color:var(--screen-cyan);}

.fiche-layout{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:0;align-items:start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  overflow:hidden;
}
.fiche-media{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:40px 28px;align-self:stretch;
  background:var(--surface-2);border-right:1px solid var(--border);
}
.fiche-media .tag{
  position:absolute;top:16px;left:16px;
  font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:999px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
}
.fiche-price{font-size:1.75rem;}
.fiche-content{padding:34px 34px 34px 30px;}
.fiche-content h1{font-size:1.7rem;margin:0 0 12px;}

.fiche-empty{padding:60px 0;text-align:center;}
.fiche-empty p{color:var(--text-muted);margin:10px 0 26px;}
.fiche-empty .modal-actions{justify-content:center;}

@media (max-width:800px){
  .fiche-layout{grid-template-columns:1fr;}
  .fiche-media{padding:28px 20px;gap:14px;border-right:none;border-bottom:1px solid var(--border);}
  .fiche-price{font-size:1.45rem;}
  .fiche-content{padding:26px 22px 30px;}
  .fiche-content h1{font-size:1.4rem;}
}

/* ---------- page dépôt & installation ---------- */
.depot-page{padding:48px 0 20px;}
/* Sélection à gauche, formulaire décalé à droite — même logique que .cart-layout. */
.depot-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:start;}
.depot-selection-card,
.depot-form-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;
}
.depot-selection-card h3,
.depot-form-card h3{font-size:1.1rem;margin:0;}

/* Prestations choisies : mêmes codes visuels que les lignes du panier
   (icône, quantité, retrait) mais sans prix — une prestation peut être
   ajoutée plusieurs fois, d'où le contrôle de quantité par ligne. */
.depot-selection{display:flex;flex-direction:column;gap:10px;margin:18px 0;}
.depot-selection-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 14px;
}
.depot-selection-row .icon{width:40px;height:40px;border-radius:9px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex:none;}
.depot-selection-row .info{flex:1 1 140px;min-width:0;}
.depot-selection-row .info h4{margin:0 0 2px;font-size:.92rem;}
.depot-selection-row .info span{font-size:.75rem;color:var(--text-muted);}
.depot-selection-empty{font-size:.85rem;color:var(--text-muted);padding:14px 0;}

/* ---------- prestations (grille sans prix) ---------- */
.depot-catalogue{padding:20px 0 90px;}
.depot-catalogue h2{font-size:1.4rem;margin:0 0 6px;}
.depot-catalogue > .container > p{color:var(--text-muted);max-width:620px;margin:0 0 8px;}
.product-foot-end{display:flex;justify-content:flex-end;margin-top:10px;}
.product-card.is-selected{border-color:var(--player-green);}
.product-card.is-selected .btn-add-depot{background:var(--player-green);border-color:var(--player-green);color:var(--on-green);}

@media (max-width:880px){
  .depot-layout{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .depot-selection-card,
  .depot-form-card{padding:24px 20px;}
}