/* Pages des kits gratuits (Inventory Kit, Shop & Vendor Kit…) : même vitrine de nuit que l'accueil. */
:root {
  --fond: #0c0e13;
  --fond-2: #12151c;
  --carte: #181c25;
  --encre: #f3efe6;
  --encre-douce: #aab1bf;
  --ligne: #2c3240;
  --accent: #f2b84b;
  --tampon: #ff5a46;
  --ombre: 0 18px 50px -24px rgba(0,0,0,.85);
  --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --large: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.55 var(--f-texte); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--f-titre); text-wrap: balance; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; }
code, pre { font-family: var(--f-data); font-size: .88rem; }
.etiquette { font: 500 .78rem/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.contenu { max-width: var(--large); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
section.bloc { padding-block: clamp(56px, 9vw, 110px); }
.section-tete { display: grid; gap: 12px; margin-bottom: clamp(28px, 5vw, 48px); }
.section-tete p { color: var(--encre-douce); max-width: 64ch; font-size: 1.05rem; }
.fond-alterne { background: var(--fond-2); border-block: 1px solid var(--ligne); }

header.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  transition: background .25s ease, box-shadow .25s ease;
}
header.barre.opaque { background: color-mix(in srgb, var(--fond) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--ligne); }
.marque { font: 800 1.15rem/1 var(--f-titre); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marque i { font: 500 .62rem/1 var(--f-data); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--tampon); border: 1.5px solid var(--tampon); border-radius: 4px; padding: 4px 5px 3px; transform: rotate(-4deg); }
.barre nav { display: flex; gap: 4px; margin-left: auto; }
.barre nav a { text-decoration: none; font-weight: 700; font-size: .95rem; padding: 8px 12px; border-radius: 999px; color: var(--encre-douce); }
.barre nav a:hover { color: var(--encre); background: rgba(255,255,255,.07); }
.choix-langue { order: 9; font: 700 .88rem/1 var(--f-texte); color: var(--encre); border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 14px; text-decoration: none; white-space: nowrap; }
.choix-langue:hover { background: var(--encre); color: var(--fond); }
@media (max-width: 760px) { .barre nav { display: none; } .choix-langue { margin-left: auto; } }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1rem/1 var(--f-texte);
  padding: 14px 20px; border-radius: 12px; border: 2px solid var(--accent); background: var(--accent); color: #17130a;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
.bouton.leger { background: rgba(12,14,19,.35); color: var(--encre); border-color: rgba(255,255,255,.4); }
.bouton:hover { transform: translateY(-2px); filter: brightness(1.08); }
.bouton.leger:hover { border-color: var(--encre); }
.bouton:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* Bandeau */
.accueil { position: relative; min-height: min(88svh, 800px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.accueil > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -2; }
.accueil::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--fond) 2%, rgba(12,14,19,0) 30%),
    linear-gradient(to bottom, rgba(12,14,19,.7), rgba(12,14,19,0) 22%),
    linear-gradient(90deg, rgba(12,14,19,.95) 0%, rgba(12,14,19,.84) 38%, rgba(12,14,19,.35) 70%, rgba(12,14,19,.15) 100%); }
@media (max-width: 720px) { .accueil::before { background: linear-gradient(to top, var(--fond) 6%, rgba(12,14,19,.88) 60%, rgba(12,14,19,.5)); } }
.accueil .contenu { width: 100%; padding-top: 120px; padding-bottom: 48px; display: grid; gap: 22px; }
.accueil .contenu > * { max-width: 720px; }
.tampon { justify-self: start; font: 800 .9rem/1 var(--f-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--tampon); border: 3px solid var(--tampon); border-radius: 6px; padding: 8px 12px 7px; transform: rotate(-3deg); background: rgba(12,14,19,.5); }
.accueil h1 { font-size: clamp(3rem, 9vw, 6.2rem); font-weight: 800; letter-spacing: -0.035em; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.accueil h1 small { display: block; font-size: .36em; letter-spacing: -0.01em; color: var(--accent); margin-top: 8px; }
.chapeau { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 60ch; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.chapeau strong { color: var(--accent); }
.appels { display: flex; flex-wrap: wrap; gap: 12px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chiffres li { font-size: .9rem; padding: 7px 12px; border-radius: 999px; background: rgba(24,28,37,.75); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.chiffres b { font-family: var(--f-data); color: var(--accent); }

/* Démo */
.cadre-demo { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--ligne)); box-shadow: var(--ombre); }
.cadre-demo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.45); }
.cadre-demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cadre-demo .lancer { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 16px; }
.cadre-demo .lancer small { color: var(--encre-douce); }
.sous-demo { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--encre-douce); font-size: .95rem; }
.sous-demo button { font: 700 .95rem/1 var(--f-texte); background: rgba(255,255,255,.08); color: var(--encre); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.mobile-seulement { display: none; }
@media (max-width: 700px) { .mobile-seulement { display: block; } }

/* Téléchargements */
.telechargements { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 860px) { .telechargements { grid-template-columns: 1fr; } }
.paquet { background: var(--carte); border: 1px solid var(--ligne); border-radius: 20px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; align-content: start; box-shadow: var(--ombre); min-width: 0; }
.paquet.principal { border-color: color-mix(in srgb, var(--accent) 55%, var(--ligne)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--carte)), var(--carte) 55%); }
.paquet ul { margin: 0; padding-left: 1.1em; color: #dcdfe6; display: grid; gap: 4px; }
.paquet .meta { font: 500 .8rem/1.3 var(--f-data); color: var(--encre-douce); }
.pastille { justify-self: start; font: 500 .72rem/1 var(--f-data); letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px; border-radius: 6px; background: var(--accent); color: #17130a; }
.pastille.discrete { background: rgba(255,255,255,.12); color: var(--encre); }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
@media (max-width: 860px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--carte); border: 1px solid var(--ligne); text-decoration: none; transition: transform .15s ease, border-color .15s ease; min-width: 0; }
.pack:hover { transform: translateY(-3px); border-color: var(--accent); }
.pack b { font-family: var(--f-titre); font-size: 1.05rem; }
.pack span { font: 500 .78rem/1.3 var(--f-data); color: var(--encre-douce); }
.pack .apercu { height: 54px; border-radius: 8px; background-image: url(/img/ik-1.jpg); background-size: 236% auto; }

/* Fonctionnalités */
.atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .atouts { grid-template-columns: 1fr; } }
.atouts li { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.atouts li span { color: var(--encre-douce); font-size: .97rem; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.galerie button { padding: 0; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #000; aspect-ratio: 16 / 9; transition: transform .15s ease, border-color .15s ease; }
.galerie button:first-child { grid-column: span 2; grid-row: span 2; }
.galerie button:hover { transform: translateY(-2px); border-color: var(--accent); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
dialog.visionneuse { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1500px); width: 100%; color: var(--encre); }
dialog.visionneuse::backdrop { background: rgba(5,6,9,.92); backdrop-filter: blur(4px); }
.visionneuse figure { margin: 0; display: grid; gap: 10px; }
.visionneuse img { width: 100%; max-height: 84vh; object-fit: contain; border-radius: 10px; display: block; }
.visionneuse .commandes { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.visionneuse .commandes span { font: 500 .85rem/1 var(--f-data); color: var(--encre-douce); }
.visionneuse button { font: 700 .95rem/1 var(--f-texte); background: rgba(255,255,255,.1); color: var(--encre); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 16px; cursor: pointer; }

/* Installation */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0 0 24px; counter-reset: etape; }
.etapes li { padding: 20px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; counter-increment: etape; min-width: 0; }
.etapes li::before { content: "0" counter(etape); font: 500 .85rem/1 var(--f-data); color: var(--accent); display: block; margin-bottom: 12px; }
.etapes b { font-family: var(--f-titre); font-size: 1.1rem; display: block; margin-bottom: 4px; }
.etapes span { color: var(--encre-douce); font-size: .95rem; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }
pre { margin: 0; background: #07080b; border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; overflow-x: auto; line-height: 1.6; color: #d9dde6; }
pre .c { color: #7d8597; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .deux { grid-template-columns: 1fr; } }
.encart { background: var(--carte); border: 1px solid var(--ligne); border-radius: 20px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 12px; align-content: start; }
.encart p { color: #dcdfe6; }
.encart code { background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 6px; }

footer { border-top: 1px solid var(--ligne); padding-block: 28px 48px; color: var(--encre-douce); font-size: .9rem; }
footer .contenu { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* --- Ajouts communs aux pages de kits (style catalogue, inspiré des pages KayKit) --- */
body { background-color: var(--fond); background-image: url(/img/motif-icones.png); background-size: 420px auto; background-attachment: fixed; }
main > section:not(.accueil):not(.fond-alterne) { background: color-mix(in srgb, var(--fond) 92%, transparent); }
.fond-alterne { background: color-mix(in srgb, var(--fond-2) 94%, transparent); }
.affiche { margin-top: 26px; border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--ligne)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.affiche img { display: block; width: 100%; height: auto; }
.catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .catalogue { grid-template-columns: 1fr; } }
.carte-kit { display: grid; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.carte-kit .vignette { position: relative; aspect-ratio: 1200 / 630; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); transition: transform .2s ease, border-color .2s ease; }
.carte-kit .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-kit:hover .vignette { transform: translateY(-4px) rotate(-.4deg); border-color: var(--accent); }
.carte-kit b { font: 800 1.15rem/1.2 var(--f-titre); color: var(--accent); }
.carte-kit span { color: var(--encre-douce); font-size: .95rem; }
.carte-kit.bientot .vignette { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--carte), var(--carte) 14px, var(--fond-2) 14px, var(--fond-2) 28px); }
.carte-kit.bientot .vignette em { font: 800 1.4rem/1.1 var(--f-titre); font-style: normal; color: var(--encre-douce); text-align: center; padding: 16px; }
.partage { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.partage input { flex: 1 1 280px; min-width: 0; font: 500 .9rem/1 var(--f-data); color: var(--encre); background: var(--fond-2); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 12px; }
.tete-kit { padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(28px, 5vw, 56px); }
.tete-kit .affiche { margin-top: 0; }
.tete-texte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: clamp(22px, 4vw, 36px); align-items: start; }
@media (max-width: 860px) { .tete-texte { grid-template-columns: 1fr; } }
.tete-texte h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.tete-texte h1 small { display: block; font-size: .42em; letter-spacing: 0; color: var(--accent); margin-top: 8px; }
.tete-texte .chapeau { margin-top: 14px; text-shadow: none; color: #dcdfe6; }
.tete-texte .cote { display: grid; gap: 16px; align-content: start; padding: 20px; border-radius: 18px; background: var(--carte); border: 1px solid var(--ligne); }
.liens-kit { display: flex; flex-wrap: wrap; gap: 8px; }
.liens-kit a { font-size: .9rem; color: var(--encre-douce); }