:root{
  --bg:#2f3c45;
  --card:#33424c;
  --text:#e7edf1;
  --muted:#b8c5cc;
  --accent:#16a085;
  --accent-2:#0e7a64;
  --shadow:0 6px 18px rgba(0,0,0,.25);
/* Height of your fixed/sticky nav */
  --nav-offset: 72px; /* ← adaptez à la hauteur réelle du bandeau */
}

/* When the browser scrolls to an element with an id, keep it below the nav */
section[id], h2[id], h3[id] { scroll-margin-top: calc(var(--nav-offset) + 8px); }

*{box-sizing:border-box}
html,body{cursor: default;margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
.container{
  max-width: 80%;/* 1200px;        adapte si besoin */
  margin: 0 auto;           /* centre le bloc */
  padding: 14px clamp(6px, 4vw, 12px);  /* top/bottom 24, left/right responsive */
}

/* Tout le contenu “texte” non cliquable garde la flèche */
main, header, footer, section, article,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, div, span { cursor: default; }

/* Éléments cliquables → main */
a, .btn, summary, button, [type="checkbox"], [type="image"], [type="radio"], [role="button"] { cursor: pointer; }

/* Zones de saisie → I */
input, textarea, select, [contenteditable="true"] { cursor: text; }

/* Header / Nav */
.site-header{position:sticky;top:0;background:rgba(47,60,69,.9);backdrop-filter:saturate(150%) blur(6px);z-index:10}
.flex{display:flex}
.center-v{align-items:center}
.between{justify-content:space-between}

.brand{gap:.6rem}
.logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.brand{
  display:inline-flex;            /* colle logo + texte */
  align-items:center;
  gap:.35rem;                     /* ajuste l’espace (0.35rem ≈ 5–6px) */
  text-decoration:none;           /* pas de soulignement au survol */
}

.brand-logo{
  display:block;                  /* retire l’espace de ligne bas */
  width:28px; height:28px;        /* fixe si besoin */
  margin:0;                       /* sécurité si un style global mettait une marge */
}

.brand-name{
  font-weight:700;
  letter-spacing:.6px;
  margin:0; padding:0;
  margin-left:.35rem;
  cursor: pointer;
}

/* si un style global sous-ligne tous les liens au hover, on blindage : */
.brand:hover { text-decoration:none !important; }

.main-nav{display:flex;gap:.4rem}
.main-nav a{padding:.75rem .9rem;border-radius:10px}
.main-nav a:hover{background:rgba(255,255,255,.06)}
.main-nav a.active{background:rgba(255,255,255,.12)}
.main-nav a.cta{background:var(--accent);color:white}
.main-nav a.cta:hover{background:var(--accent-2)}
.burger{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer}

/* L’icône */
nav a img {
  display: block;                /* supprime la baseline de l'image */
  width: 22px;                   /* taille de l’icône */
  height: 18px;
}


/* Hero */
.hero{padding:.2rem 1rem;text-align:center}
.hero-logo{width:180px;margin:0 auto 1rem}
.lead{max-width:720px;margin:.5rem auto 1.5rem;color:var(--muted)}
.actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:12px;background:#3c4b56;color:var(--text);box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}

/* Grid features */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:.7rem 0 .7rem}
.grid-3 article{background:var(--card);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow)}

/* Footer */
.site-footer{color:var(--muted);text-align:center;font-size:0.8rem}

/* Forms */
.buy-form{max-width:520px;margin:1rem auto;background:var(--card);padding:1rem;border-radius:14px;box-shadow:var(--shadow)}
.buy-form label{display:block;margin-bottom:.3rem;color:var(--muted)}
.buy-form input{width:100%;padding:.65rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#2a3841;color:var(--text)}
.buy-form input:focus {
  border-color: var(--accent, #16a085);
  box-shadow: 0 0 0 .15rem rgba(22,160,133,.25); /* optionnel */
}
.buy-form .actions{margin-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* Forms */
.buy-form-contact{max-width:1024px;margin:1rem auto;background:var(--card);padding:1rem;border-radius:14px;box-shadow:var(--shadow)}
.buy-form-contact label{display:block;margin-bottom:.3rem;color:var(--muted)}

.buy-form-contact label{
  color:#cfe2ea;              /* fallback pour IE/WebBrowser */
  color:var(--muted);         /* pour les navigateurs modernes */
}

.buy-form-contact input{width:100%;padding:.65rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#2a3841;color:var(--text)}
.buy-form-contact input:focus {
  border-color: var(--accent, #16a085);
  box-shadow: 0 0 0 .15rem rgba(22,160,133,.25); /* optionnel */
}
.buy-form-contact input:focus,
.buy-form-contact textarea:focus,
.buy-form-contact select:focus {
  border-color: var(--accent, #16a085);
  box-shadow: 0 0 0 .15rem rgba(22,160,133,.25);
}
.buy-form-contact .actions{margin-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* Champs qui remplissent la largeur du formulaire */
.buy-form-contact input[type="text"],
.buy-form-contact input[type="email"],
.buy-form-contact textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* inclut padding/border dans la largeur */
  display: block;
}

/* Si le champ est dans une grille, évite l'overflow */
.buy-form-contact .grid > * { min-width: 0; }

/* Classe utilitaire pour forcer un champ à occuper toute la grille */
.buy-form-contact .full { grid-column: 1 / -1; }

/* Optionnel: limiter le redimensionnement au vertical */
.buy-form-contact textarea { resize: vertical; }

/* Bloc code/licence : propre + scroll horizontal si trop long */
.code-line{
  margin-top:.35rem;
  padding:.55rem .7rem;
  background:#26323a;
  /* border:1px solid rgba(255,255,255,.10); */
  border:1px solid rgba(0, 255, 0, 0.9); /* 90% opaque */
  border-radius:8px;
  /* pas de scroll, on autorise la coupure */
  white-space:normal;
  overflow-x:visible;
  overflow-wrap:anywhere;   /* modernes */
  word-break:break-word;    /* fallback */
  max-width:100%;
}

.code-line-update{
  margin-top:.35rem;
  padding:.55rem .7rem;
  background:#26323a;
  /* border:1px solid rgba(255,255,255,.10); */
  border:1px solid rgba(0, 255, 0, 0.9); /* 90% opaque */
  border-radius:8px;
  /* pas de scroll, on autorise la coupure */
  white-space:normal;
  overflow-x:visible;
  overflow-wrap:anywhere;   /* modernes */
  word-break:break-word;    /* fallback */
  max-width:100%;
  font-size:0.8rem;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing:.2px; }

/* Optionnel : un peu d’air dans les notes */
.note{ padding: .4rem 1rem; border-radius:10px; }

/* Responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .main-nav{display:none;flex-direction:column;gap:.4rem;position:absolute;right:4%;top:58px;background:#2c3a43;padding:.6rem;border-radius:12px;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .burger{display:block}
  .grid-3{grid-template-columns:1fr}
}

/* ===== Liens : même couleur pour normal + visited ===== */
:root{
  --link:#8cd3ff;           /* bleu clair */
  --link-hover:#c7ecff;     /* bleu + clair au survol */
}

a, a:link, a:visited { 
  color: var(--link);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ===== Champs de saisie : texte blanc sur fond sombre ===== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  background: var(--panel, #2c3a42);
  color: var(--fg, #e8f0f4);
  border: 1px solid var(--panel-border, #223038);
  outline: none;
}

/* Placeholders (navigateurs modernes) */
input::placeholder,
textarea::placeholder {
  color: rgba(232,240,244,.65);
}

/* Radios on one line, centered with the label */
.form-inline { display:flex; align-items:center; gap:.6rem; }
.form-inline > label { margin:0; }

/* Tight radio/label pairing */
.inline-choices { display:flex; align-items:center; gap:1rem; }
.inline-choices label { display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.inline-choices input { margin:0; }

/* Checkbox + long text: neat wrap aligned under the text, not under the box */
.agree-grid { display:grid; grid-template-columns:auto 1fr; align-items:start; column-gap:.5rem; }
.agree-grid input { margin-top:.2rem; }   /* align tick with first text line */

.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 1000;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.back-to-top img{ display:block; width:24px; height:24px; filter: invert(1); }

.back-to-top.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover{ transform: translateY(-2px); }

@media (max-width: 480px){
  .back-to-top{ right: 12px; bottom: 12px; width: 44px; height: 44px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}