/* =========================================================================
   HDS STUDIO — la vitrine (hdsstudio.fr), autour du H-Store
   Nuit, verre sombre, signature cyan → violet → rose. Les textes et les
   couleurs de chaque application viennent de vitrine/applis.json : rien
   n'est figé ici. Aussi chargé par les pages légales (legal.css par-dessus).

   29/10/2026 — VERSION ALLÉGÉE pour les téléphones Android : plus aucune
   animation en boucle, plus de flou (backdrop-filter, filter: blur), plus de
   ciel animé ni de grain. La constellation est un arbre fixe (site.js arbre()).
   Seuls restent de petits effets au survol de la souris (ordinateur).
   ========================================================================= */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fond: #07060d;
  --fond-2: #0f0b19;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --bord: rgba(255, 255, 255, .08);
  --bord-2: rgba(255, 255, 255, .15);
  --texte: #f5f2fc;
  --doux: #aba4c1;
  --tres-doux: #746c8b;
  --cyan: #21d4fd;
  --violet: #8b5cff;
  --rose: #ff3d9a;
  --lilas: #b9a2ff;
  --signature: linear-gradient(100deg, #21d4fd 0%, #8b5cff 52%, #ff3d9a 100%);
  --degrade: linear-gradient(100deg, #6fe3ff 0%, #a98cff 50%, #ff7cbc 100%);
  --doux-courbe: cubic-bezier(.2, .8, .2, 1);
  --large: 1240px;
}

* { box-sizing: border-box; }
html {
  /* le ciel : quelques lueurs peintes une seule fois, qui défilent avec la page (pas de calque fixe) */
  background:
    radial-gradient(900px 620px at 12% -120px, rgba(139, 92, 255, .26), transparent 70%),
    radial-gradient(760px 560px at 96% 280px, rgba(255, 61, 154, .11), transparent 70%),
    radial-gradient(800px 600px at 40% 1500px, rgba(33, 212, 253, .07), transparent 70%),
    var(--fond);
  background-repeat: no-repeat;
  color: var(--texte);
  font-family: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(139, 92, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--lilas); outline-offset: 3px; border-radius: 12px; }

/* l'ancien ciel animé (encore présent dans les pages légales) : remplacé par le fond de html */
.ciel { display: none; }

/* ---------- Typo commune ---------- */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 7px 14px 7px 12px;
  border: 1px solid var(--bord); border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--doux); font-size: 13px; font-weight: 550; letter-spacing: .02em;
}
.surtitre img { width: 18px; height: 18px; border-radius: 5px; }
.pastille-vive { width: 8px; height: 8px; border-radius: 50%; background: #7fe6ff; box-shadow: 0 0 0 3px rgba(33, 212, 253, .18); }

.degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
h1, h2, h3 { margin: 0; font-weight: 760; letter-spacing: -.04em; line-height: 1.02; }
em { font-style: normal; }

/* ---------- Boutons ---------- */
.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: linear-gradient(120deg, #2bb8f5, #8b5cff 55%, #e2459f);
  color: #fff; font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px -8px rgba(139, 92, 255, .75), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .3s var(--doux-courbe), filter .3s;
}
.bouton.fantome { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--bord-2) inset; }
.bouton.petit { height: 40px; padding: 0 18px; font-size: 14px; }
@media (hover: hover) {
  .bouton:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .bouton.fantome:hover { background: rgba(255, 255, 255, .1); }
}

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 max(24px, calc((100vw - var(--large)) / 2));
  transition: background-color .3s;
}
.entete.defile { background: rgba(9, 7, 16, .94); box-shadow: 0 1px 0 var(--bord); }
.marque { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; flex: none; }
.marque img { border-radius: 9px; }
.marque b { font-weight: 800; }
.menu { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.menu a { padding: 9px 14px; border-radius: 999px; color: var(--doux); font-size: 14.5px; font-weight: 520; transition: color .25s, background-color .25s; }
.menu a:hover { color: var(--texte); background: rgba(255, 255, 255, .06); }
.discord-entete {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  color: var(--doux); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--bord-2) inset;
  transition: color .25s, background-color .25s;
}
.discord-entete svg { width: 19px; height: 19px; fill: currentColor; }
.discord-entete:hover { color: #fff; background: #5865f2; }
.compte-entete { flex: none; }
.compte-entete.connecte { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.mini-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .15); font-size: 13px; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   LE HÉROS : le H-Store, en haut de son arbre
   (téléphone d'abord ; deux colonnes seulement à partir de 981 px)
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 8px;
  max-width: 1380px; margin: 0 auto; padding: 76px 18px 56px; text-align: center;
}
.hero-texte { position: relative; z-index: 2; display: grid; justify-items: center; min-width: 0; }
.arbre-cadre { order: -1; width: 100%; display: grid; justify-items: center; }

/* Le titre « H-Store » : un dégradé fixe, sans ombre floue */
.titre-store {
  font-size: clamp(76px, 23vw, 112px); font-weight: 820; letter-spacing: -.06em; line-height: .9;
  margin: 0 0 14px;
}
.titre-store .ligne { display: block; padding: .02em .08em .14em .02em; margin: 0 -.08em -.14em -.02em; white-space: nowrap; }
.titre-store .ligne > span {
  display: inline-block;
  background: linear-gradient(100deg, #ffffff 0%, #f1ecff 30%, #8fe8ff 52%, #ad90ff 72%, #ff86c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.accroche-store {
  margin: 0 0 30px; max-width: 520px;
  font-size: clamp(20px, 5.4vw, 24px); font-weight: 620; letter-spacing: -.025em; line-height: 1.3; color: #ebe6f8;
}

/* Les deux gros boutons Windows / Android */
.boutons-store { display: grid; gap: 12px; width: 100%; max-width: 400px; }
.dl-store {
  position: relative; display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 20px 0 12px; border-radius: 22px; text-align: left;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset;
  transition: transform .3s var(--doux-courbe), background-color .3s;
}
.dl-store.principal {
  background: linear-gradient(115deg, #21d4fd -10%, #8b5cff 50%, #ff3d9a 110%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 18px 40px -18px rgba(139, 92, 255, .95);
}
@media (hover: hover) {
  .dl-store:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, .1); }
  .dl-store.principal:hover { filter: brightness(1.07); }
}
.dl-store-icone {
  flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.dl-store-icone svg { width: 23px; height: 23px; fill: #fff; }
.dl-store-texte { display: grid; line-height: 1.12; white-space: nowrap; }
.dl-store-texte small { font-size: 12px; font-weight: 560; letter-spacing: .01em; opacity: .78; }
.dl-store-texte b { font-size: 21px; font-weight: 760; letter-spacing: -.025em; }
.dl-store-taille { margin-left: auto; padding-left: 10px; font-size: 12.5px; font-weight: 600; opacity: .75; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-store.indisponible { opacity: .45; pointer-events: none; }

.sous-store { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; color: var(--doux); font-size: 15.5px; font-weight: 520; line-height: 1.4; }
.sync { flex: none; width: 20px; height: 20px; fill: none; stroke: #7fe6ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.meta-store { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 14px 0 0; color: var(--tres-doux); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.meta-store #version-store:empty { display: none; }
.lien-discord { display: inline-flex; align-items: center; gap: 8px; color: #b8bdfc; font-weight: 600; transition: color .25s; }
.lien-discord svg { width: 18px; height: 18px; fill: currentColor; }
.lien-discord:hover { color: #fff; }

/* ---------- La constellation (fixe) : le H-Store au centre, les familles puis les applis tout autour ----------
   site.js pose --ratio (proportions du dessin) et place chaque élément en %.
   Les tailles (--t) sont des % de la LARGEUR du cadre : les marges en % aussi,
   donc chaque icône est centrée pile sur son point, à toutes les tailles. */
.arbre {
  position: relative; width: min(400px, 94vw); aspect-ratio: var(--ratio, 1 / 1);
  margin: 0 0 6px;
}
.arbre-traits { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.racine {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: var(--t, 22.2%);
  margin: calc(var(--t, 22.2%) / -2) 0 0 calc(var(--t, 22.2%) / -2);
}
.racine img {
  width: 100%; height: auto; border-radius: 22.6%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 18px 46px -12px rgba(139, 92, 255, .95);
}
.famille {
  position: absolute; z-index: 2; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--c, var(--lilas));
}
.feuille {
  position: absolute; z-index: 2; width: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  display: grid; justify-items: center;
}
.feuille img, .feuille .tuile-icone {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 23%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 22px -10px var(--ombre, rgba(139, 92, 255, .8));
}
/* le nom sous l'icône ne doit pas élargir la case (sinon une appli au nom long a une plus grosse icône) */
.feuille .nom {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; font-size: 9.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: #d6d0e6;
}
@media (hover: hover) {
  .feuille img, .feuille .tuile-icone { transition: transform .25s var(--doux-courbe); }
  .feuille:hover img, .feuille:hover .tuile-icone { transform: scale(1.1); }
  .feuille:hover .nom { color: #fff; }
}
.tuile-icone { display: grid; place-items: center; background: radial-gradient(120% 100% at 30% 15%, #2d2140 0%, #17111f 60%, #0f0b16 100%); border-radius: 23%; }
.tuile-icone img { width: 84% !important; height: auto; box-shadow: none !important; border-radius: 0 !important; }

.descendre { display: none; position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--bord-2); border-radius: 14px; }
.descendre span { position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #7fe6ff; }

@media (min-width: 640px) {
  .arbre { width: min(520px, 86vw); }
  .boutons-store { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; }
  .dl-store { flex: 0 1 260px; }
  .famille { font-size: 11px; }
  .feuille .nom { font-size: 11.5px; margin-top: 7px; }
}
@media (min-width: 981px) {
  .hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); justify-items: stretch; text-align: left; gap: 32px; padding: 104px 40px 84px; }
  .hero-texte { justify-items: start; }
  .arbre-cadre { order: 0; }
  .arbre { width: min(640px, 100%); }
  .titre-store { font-size: clamp(96px, 10.6vw, 184px); margin-bottom: 18px; }
  .accroche-store { font-size: clamp(22px, 1.9vw, 30px); margin-bottom: 38px; }
  .boutons-store { justify-content: flex-start; }
  .dl-store { flex: 0 1 252px; }
  .meta-store { justify-content: flex-start; }
  .famille { font-size: 12px; }
  .feuille .nom { font-size: 12.5px; }
}
@media (min-width: 1600px) {
  .hero { max-width: 1520px; gap: 64px; }
  .arbre { width: min(720px, 100%); }
  .titre-store { font-size: 168px; }
  .dl-store { flex-basis: 270px; height: 78px; }
}

/* ==========================================================================
   LES APPLICATIONS : une grille de cartes sombres
   ========================================================================== */
section { position: relative; }
/* ce qui est sous l'écran n'est dessiné que quand on y arrive */
.applis, .comment, .communaute { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.section-tete { max-width: 780px; margin: 0 auto 48px; text-align: center; padding: 0 24px; }
.section-tete h2 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -.05em; margin-bottom: 16px; }
.sous-titre { margin: 0; color: var(--doux); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }
/* la fin colorée d'un titre reste d'un seul tenant (jamais « Une » seul en bout de ligne) */
.section-tete h2 em, .bandeau-tete h2 em, .carte-discord h2 em { display: inline-block; }

.applis { padding: 96px 0 30px; }
.liste-applis {
  --ecart: 20px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ecart);
  max-width: var(--large); margin: 0 auto; padding: 0 16px;
}
.appli {
  --c1: #21d4fd; --c2: #8b5cff; --c3: #ff3d9a;
  position: relative; flex: 1 1 100%; min-width: 0;
  display: flex; flex-direction: column;
  padding: 24px 22px 20px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: 0 0 0 1px var(--bord) inset;
  transition: transform .4s var(--doux-courbe);
}
/* le liseré dégradé, discret au repos, vif au survol */
.appli::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, var(--c1), transparent 38%, transparent 62%, var(--c3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .3;
}
@media (hover: hover) {
  .appli:hover { transform: translateY(-4px); }
  .appli:hover::after { opacity: 1; background: linear-gradient(135deg, var(--c1), var(--c2) 50%, var(--c3)); }
}

.appli-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.icone-3d {
  position: relative; flex: none; display: block; width: 64px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 26px -12px var(--c2), 0 0 0 1px rgba(255, 255, 255, .12);
}
.icone-3d img, .icone-3d .tuile-icone { width: 100%; aspect-ratio: 1; border-radius: 0; }
.appli h3 { font-size: 28px; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 4px; }
.role {
  display: inline-block; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--c1), var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.appli .accroche { margin: 0 0 10px; font-size: 19px; font-weight: 650; letter-spacing: -.025em; line-height: 1.28; color: #fff; }
.appli .texte { margin: 0 0 14px; color: var(--doux); font-size: 14.5px; line-height: 1.62; }
.appli .note { margin: -4px 0 14px; color: var(--tres-doux); font-size: 12.5px; line-height: 1.5; }
.appli-pied { display: grid; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
/* les boutons de téléchargement de chaque appli (le premier = celui de l'appareil du visiteur, en couleur) */
.dl-appli-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-appli {
  flex: 1 1 130px; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px 0 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--bord-2) inset;
  color: #fff; font-size: 14.5px; font-weight: 680; letter-spacing: -.01em; white-space: nowrap;
  transition: background-color .25s, transform .25s var(--doux-courbe);
}
.dl-appli svg { flex: none; width: 17px; height: 17px; fill: currentColor; }
.dl-appli small { margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }
.dl-appli.principal { background: linear-gradient(115deg, var(--c1) -20%, var(--c2) 55%, var(--c3) 120%); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset; }
.dl-appli:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .dl-appli:hover { background-color: rgba(255, 255, 255, .12); transform: translateY(-1px); }
  .dl-appli.principal:hover { filter: brightness(1.08); }
}
.appli-version { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; color: var(--tres-doux); font-size: 12px; font-variant-numeric: tabular-nums; }
.plateformes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.plateformes li {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .045); box-shadow: 0 0 0 1px var(--bord) inset;
  color: #ddd7ec; font-size: 12px; font-weight: 600;
}
.plateformes svg { width: 13px; height: 13px; fill: currentColor; opacity: .9; }
.dans-store {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 4px;
  color: var(--tres-doux); font-size: 12px; font-weight: 600; transition: color .3s;
}
.dans-store img { width: 18px; height: 18px; border-radius: 5px; opacity: .85; }
.dans-store:hover { color: #e9e4f7; }

@media (min-width: 700px) {
  .liste-applis { padding: 0 24px; }
  .appli { flex: 0 1 calc((100% - var(--ecart)) / 2); }
}
@media (min-width: 1100px) {
  .liste-applis { --ecart: 22px; }
  .appli { flex: 0 1 calc((100% - 2 * var(--ecart)) / 3); padding: 28px 26px 22px; border-radius: 28px; }
  .applis { padding-top: 120px; }
}

/* ==========================================================================
   COMMENT ÇA MARCHE : trois gestes
   ========================================================================== */
.comment { padding: 110px 16px 20px; }
.bandeau-store {
  position: relative; max-width: var(--large); margin: 0 auto; padding: 30px 22px 26px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(33, 212, 253, .12), transparent 62%),
    radial-gradient(700px 360px at 100% 100%, rgba(255, 61, 154, .12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  box-shadow: 0 0 0 1px var(--bord) inset;
}
.bandeau-store::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, rgba(33, 212, 253, .55), transparent 35%, transparent 65%, rgba(255, 61, 154, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.bandeau-tete { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 28px; }
.bandeau-logo { width: 72px; height: 72px; border-radius: 22.6%; box-shadow: 0 16px 36px -14px rgba(139, 92, 255, .9), 0 0 0 1px rgba(255, 255, 255, .14); }
.bandeau-tete .surtitre { margin-bottom: 10px; }
.bandeau-tete h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.05em; }
.gestes { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; counter-reset: none; }
.gestes li {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--bord) inset;
}
.geste-icone {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--signature); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.geste-icone svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.geste-num { position: absolute; top: 12px; right: 16px; font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .22); font-variant-numeric: tabular-nums; }
.gestes b { font-size: 17.5px; font-weight: 680; letter-spacing: -.02em; line-height: 1.3; padding-right: 18px; }
.astuces { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .07); }
.astuces p { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--doux); font-size: 14px; line-height: 1.55; }
.astuces i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--bord) inset; margin-top: -3px; }
.astuces svg { width: 14px; height: 14px; fill: #ddd7ec; }
.astuces b { color: var(--texte); font-weight: 650; }
@media (min-width: 900px) {
  .comment { padding: 140px 24px 24px; }
  .bandeau-store { padding: 46px 48px 36px; border-radius: 36px; }
  .bandeau-tete { flex-direction: row; text-align: left; gap: 22px; margin-bottom: 36px; }
  .bandeau-logo { width: 84px; height: 84px; }
  .gestes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gestes li { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 24px 24px; border-radius: 24px; }
  .geste-num { top: 20px; right: 22px; font-size: 15px; }
  .gestes b { font-size: 20px; padding-right: 0; }
  /* un fil de lumière relie les trois gestes */
  .gestes li:not(:last-child)::after {
    content: ''; position: absolute; top: 49px; right: -16px; width: 16px; height: 2px;
    background: linear-gradient(90deg, rgba(139, 92, 255, .8), rgba(33, 212, 253, .8));
  }
  .astuces { grid-template-columns: 1.25fr 1fr; gap: 16px 28px; margin-top: 28px; }
}

/* ==========================================================================
   DISCORD
   ========================================================================== */
.communaute { padding: 22px 16px 90px; }
.carte-discord {
  max-width: var(--large); margin: 0 auto; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: center; gap: 16px;
  padding: 28px 22px; border-radius: 30px; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, rgba(88, 101, 242, .22), rgba(139, 92, 255, .1) 55%, rgba(255, 61, 154, .06));
  box-shadow: 0 0 0 1px rgba(140, 150, 255, .24) inset;
}
.carte-discord .surtitre { margin-bottom: 8px; }
.carte-discord h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 8px; letter-spacing: -.04em; }
.carte-discord .sous-titre { font-size: 15px; }
.discord-logo {
  width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(145deg, #6b77ff, #4752c4); box-shadow: 0 12px 28px -12px rgba(88, 101, 242, .95), 0 1px 0 rgba(255, 255, 255, .3) inset;
}
.discord-logo svg { width: 40px; height: 40px; fill: #fff; }
.bouton.bouton-discord { background: linear-gradient(135deg, #6b77ff, #5865f2 55%, #4752c4); width: 100%; max-width: 320px; }
@media (min-width: 760px) {
  .communaute { padding: 24px 24px 110px; }
  .carte-discord { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; gap: 28px; padding: 32px 38px; border-radius: 32px; }
  .bouton.bouton-discord { width: auto; }
}

/* ---------- Pied de page ---------- */
.pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  max-width: var(--large); margin: 0 auto; padding: 36px 24px 48px; border-top: 1px solid var(--bord);
  color: var(--tres-doux); font-size: 14px;
}
.pied .marque { color: var(--texte); font-size: 16px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pied nav a:hover { color: var(--texte); }
.pied p { margin: 0 0 0 auto; }

/* ---------- Téléphones ---------- */
@media (max-width: 640px) {
  html { scroll-padding-top: 70px; }
  .entete { height: 62px; gap: 10px; padding: 0 16px; }
  .menu { display: none; }
  .discord-entete { margin-left: auto; width: 38px; height: 38px; }
  .marque { font-size: 17px; }
  .marque img { width: 30px; height: 30px; }
  .bouton.petit { height: 38px; padding: 0 15px; font-size: 13.5px; }
  .section-tete { margin-bottom: 34px; }
  .pied { flex-direction: column; align-items: flex-start; }
  .pied p { margin: 0; }
}

/* ---------- Moins de mouvement si l'appareil le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ==========================================================================
   29/10/2026 — LE SITE EN PLUSIEURS PAGES
   Accueil = HDS Studio + la constellation ; menu « Nos applications » ;
   /applications/ = la liste ; /applications/<id> = la page de chaque appli.
   ========================================================================== */

/* ---------- Le menu « Nos applications » ---------- */
.menu { align-items: center; }
.menu-applis { position: relative; }
.menu-lien {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  color: var(--doux); font-size: 14.5px; font-weight: 560; transition: color .25s, background-color .25s;
}
.menu-lien:hover, .menu-applis.ouvert #bouton-applis { color: var(--texte); background: rgba(255, 255, 255, .07); }
.chevron { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.menu-applis.ouvert .chevron { transform: rotate(180deg); }
.panneau-applis {
  position: absolute; top: calc(100% + 12px); left: 50%; width: min(640px, calc(100vw - 32px)); z-index: 60;
  transform: translate(-50%, -6px); opacity: 0; visibility: hidden; pointer-events: none;
  padding: 14px; border-radius: 24px;
  background: #120e1d; box-shadow: 0 0 0 1px var(--bord-2), 0 30px 70px -20px rgba(0, 0, 0, .9), 0 20px 60px -30px rgba(139, 92, 255, .6);
  transition: opacity .2s, transform .25s var(--doux-courbe), visibility 0s .25s;
}
/* une marge invisible entre le bouton et le panneau : la souris ne le perd pas en descendant */
.panneau-applis::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu-applis.ouvert .panneau-applis { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .2s, transform .25s var(--doux-courbe); }
.panneau-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.menu-appli { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; transition: background-color .2s; }
.menu-appli:hover, .menu-appli:focus-visible { background: rgba(255, 255, 255, .06); }
.menu-appli-icone { flex: none; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.menu-appli-icone img, .menu-appli-icone .tuile-icone { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; object-fit: cover; }
.menu-appli-texte { display: grid; min-width: 0; line-height: 1.25; }
.menu-appli-texte b { font-size: 15px; font-weight: 720; letter-spacing: -.015em; }
.menu-appli-texte small { color: var(--tres-doux); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panneau-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--bord); }
.panneau-store { display: flex; align-items: center; gap: 12px; }
.panneau-store img { border-radius: 10px; }
.panneau-store span { display: grid; line-height: 1.25; }
.panneau-store b { font-size: 14.5px; }
.panneau-store small { color: var(--tres-doux); font-size: 12.5px; }
.panneau-tout { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: #e9e4f7; font-size: 13.5px; font-weight: 650; background: rgba(255, 255, 255, .06); }
.panneau-tout svg, .decouvrir svg, .bouton svg, .bandeau-lien-store svg, .retour-liste svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.panneau-tout:hover { background: rgba(255, 255, 255, .1); }

/* ---------- L'accueil : HDS Studio + la constellation ---------- */
.titre-studio {
  margin: 0 0 16px; font-size: clamp(58px, 17vw, 96px); font-weight: 820; letter-spacing: -.055em; line-height: .92;
}
.titre-studio span { display: inline-block; padding: 0 .04em .1em 0; }
.titre-studio span:first-child { color: #fff; }
.titre-studio span:last-child { background: linear-gradient(100deg, #8fe8ff 0%, #ad90ff 50%, #ff86c2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boutons-accueil { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.boutons-accueil .bouton img { width: 22px; height: 22px; border-radius: 6px; }
.hero.accueil .meta-store { margin-top: 22px; }
a.racine { display: block; }
@media (hover: hover) { a.racine img { transition: transform .3s var(--doux-courbe); } a.racine:hover img { transform: scale(1.05); } }
.arbre-aide { margin: 4px 0 0; color: var(--tres-doux); font-size: 13px; font-weight: 520; }
@media (min-width: 981px) {
  .titre-studio { font-size: clamp(88px, 8.4vw, 150px); }
  .boutons-accueil { justify-content: flex-start; }
}

/* ---------- Pages intérieures ---------- */
.page-interieure { padding-top: 96px; min-height: 70vh; }
.page-interieure .applis { padding-top: 24px; content-visibility: visible; }
.section-tete h1 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -.05em; margin-bottom: 16px; }
.section-tete h1 em { display: inline-block; }

/* la liste, rangée par famille */
.familles { display: grid; gap: 54px; }
.famille-titre {
  display: flex; align-items: center; gap: 12px; max-width: var(--large); margin: 0 auto 18px; padding: 0 24px;
  color: var(--cf); font-size: 13px; font-weight: 780; letter-spacing: .16em; text-transform: uppercase;
}
.famille-point { width: 9px; height: 9px; border-radius: 50%; background: var(--cf); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.famille-titre::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cf), transparent); opacity: .45; }
.carte-lien { color: inherit; }
.carte-lien .appli-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.decouvrir { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #fff; font-size: 14px; font-weight: 700; }
.decouvrir small { color: var(--tres-doux); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.decouvrir svg { transition: transform .25s; }
@media (hover: hover) { .carte-lien:hover .decouvrir svg { transform: translateX(3px); } }
.bandeau-lien-store {
  display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 64px auto 40px; padding: 20px 24px; border-radius: 26px;
  background: linear-gradient(120deg, rgba(33, 212, 253, .1), rgba(139, 92, 255, .12) 50%, rgba(255, 61, 154, .1));
  box-shadow: 0 0 0 1px var(--bord-2) inset;
}
.bandeau-lien-store img { flex: none; border-radius: 18px; box-shadow: 0 14px 30px -14px rgba(139, 92, 255, .9); }
.bandeau-lien-store span { display: grid; gap: 4px; }
.bandeau-lien-store b { font-size: 20px; letter-spacing: -.02em; }
.bandeau-lien-store small { color: var(--doux); font-size: 14px; line-height: 1.45; }
.bandeau-lien-store svg { flex: none; margin-left: auto; width: 22px; height: 22px; }
@media (max-width: 640px) { .bandeau-lien-store { margin: 48px 16px 30px; } .bandeau-lien-store img { width: 52px; height: 52px; } }

/* ---------- La page d'une appli ---------- */
.page-appli { --c1: #21d4fd; --c2: #8b5cff; --c3: #ff3d9a; max-width: var(--large); margin: 0 auto; padding: 8px 18px 40px; }
.appli-attente { display: grid; place-items: center; min-height: 50vh; }
.tourne { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--violet); animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.retour-liste { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; color: var(--doux); font-size: 14px; font-weight: 600; }
.retour-liste:hover { color: var(--texte); }
.appli-hero {
  position: relative; display: grid; gap: 22px; justify-items: center; text-align: center;
  padding: 30px 20px 26px; border-radius: 32px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: 0 0 0 1px var(--bord) inset;
}
/* les couleurs de l'appli, en deux lueurs fixes */
.appli-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 300px at 12% 0%, var(--c1), transparent 70%), radial-gradient(520px 300px at 92% 100%, var(--c3), transparent 70%);
  opacity: .2;
}
.icone-3d.grande { width: 112px; border-radius: 30px; box-shadow: 0 24px 50px -18px var(--c2), 0 0 0 1px rgba(255, 255, 255, .14); }
.appli-hero-texte { display: grid; justify-items: center; gap: 0; min-width: 0; }
.appli-hero h1 { font-size: clamp(48px, 13vw, 92px); letter-spacing: -.055em; margin: 6px 0 10px; }
.appli-hero .role { font-size: 12.5px; }
.accroche-appli { margin: 0 0 12px; font-size: clamp(21px, 5.4vw, 30px); font-weight: 680; letter-spacing: -.03em; line-height: 1.22; }
.texte-appli { margin: 0 0 18px; max-width: 640px; color: var(--doux); font-size: 16px; line-height: 1.65; }
.appli-hero .plateformes { justify-content: center; margin-bottom: 18px; }
.appli-hero .dl-appli-liste { width: 100%; max-width: 560px; justify-content: center; }
.appli-hero .appli-version { justify-content: center; margin-top: 12px; gap: 6px 16px; }
.appli-hero .appli-version .note { color: var(--doux); }
.page-appli .dl-appli { min-height: 58px; border-radius: 18px; flex: 1 1 200px; }
.dl-appli span { display: grid; line-height: 1.15; text-align: left; }
.dl-appli span small { margin: 0; padding: 0; font-size: 11px; font-weight: 560; opacity: .78; }
.dl-appli em { margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 600; font-style: normal; opacity: .75; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .page-appli { padding: 8px 24px 60px; }
  .appli-hero { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: 40px; padding: 48px 52px 44px; border-radius: 40px; }
  .icone-3d.grande { width: 168px; border-radius: 42px; align-self: start; }
  .appli-hero-texte { justify-items: start; }
  .appli-hero .plateformes, .appli-hero .dl-appli-liste, .appli-hero .appli-version { justify-content: flex-start; }
}

.bloc-appli { margin-top: 64px; }
.titre-bloc { margin: 0 0 22px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.045em; }
.fonctions { display: grid; gap: 14px; }
.fonction {
  padding: 22px 22px 20px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: 0 0 0 1px var(--bord) inset;
}
.fonction-icone { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset; }
.fonction-icone svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.fonction h3 { font-size: 19px; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 8px; }
.fonction p { margin: 0; color: var(--doux); font-size: 14.5px; line-height: 1.6; }
@media (min-width: 700px) { .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .fonctions { grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); } }

/* l'aperçu : les captures (ordinateur en large, téléphone dans un cadre de téléphone) */
.apercu-galerie {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 18px 16px; margin: 0 -18px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.capture { flex: none; margin: 0; scroll-snap-align: center; display: grid; gap: 10px; align-content: start; }
.capture.pc, .capture.tele { width: min(86vw, 760px); }
.capture.telephone { width: min(58vw, 270px); }
.capture-cadre { display: block; width: 100%; padding: 0; border: 0; background: #0d0a15; cursor: zoom-in; overflow: hidden; border-radius: 18px; box-shadow: 0 0 0 1px var(--bord-2), 0 24px 50px -24px rgba(0, 0, 0, .9); }
.capture.telephone .capture-cadre { border-radius: 30px; padding: 7px; background: #1a1524; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 50px -24px var(--c2); }
.capture.telephone .capture-cadre img { border-radius: 24px; }
.capture-cadre img { width: 100%; height: auto; }
.capture figcaption { color: var(--doux); font-size: 14px; font-weight: 560; text-align: center; }
@media (min-width: 900px) { .apercu-galerie { margin: 0; padding: 4px 2px 16px; } }

.jeux-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.jeux-grille img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--bord); }

.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5, 4, 9, .94); }
.visionneuse figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; max-height: 100%; }
.visionneuse img { max-width: min(1400px, 94vw); max-height: 82vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--bord-2); }
.visionneuse figcaption { color: var(--doux); font-size: 15px; }
.visio-fermer, .visio-avant, .visio-apres {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.visio-fermer { top: 16px; right: 16px; }
.visio-avant { left: 14px; top: 50%; transform: translateY(-50%); }
.visio-apres { right: 14px; top: 50%; transform: translateY(-50%); }

/* les autres applis */
.autres-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.autre { display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 20px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 1px var(--bord) inset; transition: background-color .2s; }
.autre:hover { background: rgba(255, 255, 255, .07); }
.autre-icone { width: 54px; height: 54px; margin-bottom: 6px; border-radius: 15px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.autre-icone img, .autre-icone .tuile-icone { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; object-fit: cover; }
.autre b { font-size: 15px; }
.autre small { color: var(--tres-doux); font-size: 12px; line-height: 1.35; }

/* le H-Store sur sa page : comment ça marche */
.page-appli .astuces { margin-top: 18px; }

/* ---------- Téléphones : le menu garde « Nos applications » ---------- */
@media (max-width: 640px) {
  .menu { display: flex; margin-left: auto; margin-right: 0; }
  .menu-store, .chevron, .panneau-applis { display: none; }
  .menu-lien { padding: 8px 12px; font-size: 14px; color: #e9e4f7; background: rgba(255, 255, 255, .06); }
  .discord-entete { display: none; }
  .page-interieure { padding-top: 78px; }
}
@media (max-width: 380px) { .compte-entete { display: none; } }

/* l'en-tête sur téléphone : « Applis » au lieu de « Nos applications » (une seule ligne) */
.menu-lien { white-space: nowrap; }
.texte-court { display: none; }
@media (max-width: 640px) {
  .texte-long { display: none; }
  .texte-court { display: inline; }
  .marque span { white-space: nowrap; }
}

/* galerie : chaque capture garde sa hauteur (pas de vide sous une capture d'ordinateur) */
.apercu-galerie { align-items: flex-start; }