/* Style commun des sites de mes programmes, façon « magasin d'applis ».
   Chaque site met ce fichier dans sa page, puis choisit sa couleur :
     <link rel="stylesheet" href="https://logicsielsyannick.ca/kit/programme.css">
     <style>:root { --couleur: #d6336c; --couleur-sombre: #ff6fa5; }</style>
   Les blocs communs s'appellent tous vy-… :
     .vy-barre  la petite barre du haut, pour revenir au site principal
     .vy-tete   l'icône, le nom, la phrase et le bouton Télécharger
     .vy-infos  la rangée Prix · Taille · Système · Langues · Signé
     .vy-get    le bouton Télécharger en pastille
     .vy-carte  un bloc blanc arrondi */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap");

:root {
  --vy-bg: #f5f5f7; --vy-carte: #ffffff; --vy-texte: #1d1d1f; --vy-doux: #6e6e73; --vy-ligne: #e5e5ea; --vy-gris: #eef0f5;
  --vy-police: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --couleur: #d6304b; --couleur-sombre: #ff6b81; --vy-accent: var(--couleur);
  --vy-m: clamp(16px, 4vw, 72px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --vy-bg: #000000; --vy-carte: #1c1c1e; --vy-texte: #f5f5f7; --vy-doux: #a1a1a6; --vy-ligne: #2c2c2e; --vy-gris: #2c2c2e; --vy-accent: var(--couleur-sombre); }
}
:root[data-theme="dark"] { --vy-bg: #000000; --vy-carte: #1c1c1e; --vy-texte: #f5f5f7; --vy-doux: #a1a1a6; --vy-ligne: #2c2c2e; --vy-gris: #2c2c2e; --vy-accent: var(--couleur-sombre); }

/* barre du haut : retour au site principal */
.vy-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--vy-m); background: var(--vy-carte); border-bottom: 1px solid var(--vy-ligne); font: 500 13px/1.3 var(--vy-police); color: var(--vy-doux); }
.vy-barre a { color: var(--vy-doux); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.vy-barre a:hover { color: var(--vy-texte); }
.vy-barre a b { color: #d6304b; font-weight: 700; }
@media (max-width: 560px) { .vy-barre > span { display: none; } }

/* en-tête : grosse icône, nom, phrase, bouton */
.vy-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(28px, 4vw, 64px) var(--vy-m) 22px; font-family: var(--vy-police); }
.vy-tete > img { width: 148px; height: 148px; border-radius: 33px; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); }
.vy-tete h1, .vy-nom { margin: 0; font: 800 clamp(36px, 4.4vw, 60px)/1.02 var(--vy-police); letter-spacing: -.04em; color: var(--vy-texte); }
.vy-sous { margin: 8px 0 20px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--vy-doux); }
@media (max-width: 640px) { .vy-tete { grid-template-columns: 1fr; gap: 16px; } .vy-tete > img { width: 104px; height: 104px; border-radius: 24px; } }

/* bouton Télécharger en pastille, à la couleur du programme */
.vy-get { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; background: var(--vy-accent); color: #fff; font: 800 17px/1.2 var(--vy-police); text-decoration: none; transition: filter .15s, transform .15s; }
.vy-get:hover { filter: brightness(1.08); }
.vy-get:active { transform: scale(.98); }
.vy-get .sz, .vy-get small { font-weight: 500; opacity: .85; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.4); }
:root[data-theme="dark"] .vy-get { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vy-get { color: #111; } }

.vy-get, .vy-get .sz { white-space: nowrap; }
@media (max-width: 640px) {
  .vy-get { display: flex; justify-content: center; width: 100%; padding: 13px 16px; font-size: 16px; }
}
.vy-autres { display: inline-block; margin: 10px 0 0 16px; font: 600 15px var(--vy-police); color: var(--vy-doux); }
.vy-autres:hover { color: var(--vy-texte); }
.vy-tete, .vy-barre, .vy-infos { box-sizing: border-box; text-align: left; }
.vy-tete *, .vy-infos * { box-sizing: border-box; }
.vy-sous { font-family: var(--vy-police); }

/* rangée d'informations */
.vy-infos { display: flex; margin: 0 var(--vy-m); padding: 14px 0; border-top: 1px solid var(--vy-ligne); border-bottom: 1px solid var(--vy-ligne); overflow-x: auto; scrollbar-width: none; font-family: var(--vy-police); }
.vy-infos::-webkit-scrollbar { display: none; }
.vy-infos > div { flex: 1 0 auto; min-width: 110px; padding: 0 18px; text-align: center; border-left: 1px solid var(--vy-ligne); }
.vy-infos > div:first-child { border-left: 0; }
.vy-infos span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vy-doux); }
.vy-infos b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--vy-texte); white-space: nowrap; }

/* bloc blanc arrondi */
.vy-carte { background: var(--vy-carte); border-radius: 24px; padding: clamp(20px, 3vw, 40px); }

/* téléphone : le lien « autres systèmes » sous le bouton */
@media (max-width: 640px) { .vy-autres { display: block; margin: 12px 0 0; text-align: center; } }