/* La page de téléchargement (racine du domaine) — feuille de style externe :
   la politique de sécurité du contenu du serveur (script-src 'self') refuse
   ce qui est en ligne dans la page. Voir index.html pour l'architecture. */
@font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/geist-sans-latin-variable.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); }

:root {
  --encre: #111114; --encre-2: #55555C; --encre-3: #6B6B74;
  --feuille: #FFFFFF; --carte: #F5F5F7; --pose-forte: #EDEDF0; --filet: #E6E6EA;
  --lime: #C9F24E; --lilas: #8B5CF6; --lilas-doux: #F2ECFF; --accent: #6D3FE0;
  --font-titre: 'Manrope', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Geist Sans', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --entree: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { background: var(--feuille); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font-family: var(--font-sans); color: var(--encre); background: var(--feuille); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

.page { position: relative; overflow: hidden; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: max(48px, env(safe-area-inset-top) + 40px) 20px max(40px, env(safe-area-inset-bottom) + 24px); }
.colonne { position: relative; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; }

/* Le halo de l'écran d'ouverture : trois taches, pas un dégradé plein. */
.halo { position: absolute; border-radius: 50%; filter: blur(28px); pointer-events: none; }
.halo-lilas { top: -40px; left: 50%; transform: translateX(-50%); width: min(78vw, 420px); height: min(78vw, 420px); background: radial-gradient(circle, rgba(196,181,253,.55) 0%, rgba(242,236,255,.35) 45%, rgba(255,255,255,0) 72%); animation: souffle 2.8s ease-in-out infinite; }
.halo-peche { top: 60px; right: -6%; width: min(48vw, 260px); height: min(48vw, 260px); background: radial-gradient(circle, rgba(255,217,194,.7) 0%, rgba(255,255,255,0) 70%); animation: derive 7s ease-in-out infinite alternate; }
.halo-lime { top: 220px; left: -4%; width: min(42vw, 220px); height: min(42vw, 220px); background: radial-gradient(circle, rgba(201,242,78,.5) 0%, rgba(255,255,255,0) 70%); animation: derive 9s ease-in-out infinite alternate-reverse; }

.marque { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.disque { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); box-shadow: 0 14px 34px -12px rgba(109,40,217,.6); animation: bat 1.4s cubic-bezier(.4,0,.2,1) infinite; }
.anneau { position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: pulse-anneau 1.4s ease-out infinite; }
.anneau-2 { animation-delay: .45s; }
.nom { margin: 26px 0 0; font-family: var(--font-titre); font-weight: 800; font-size: 34px; letter-spacing: -.035em; line-height: 1.1; animation: monte 520ms var(--entree) both 180ms; }
.produit { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--encre-3); animation: monte 520ms var(--entree) both 320ms; }
.produit a { text-decoration: none; }
.produit a:hover { text-decoration: underline; }

h1 { margin: 40px 0 0; text-align: center; font-family: var(--font-titre); font-weight: 800; font-size: clamp(26px, 5.4vw, 38px); letter-spacing: -.03em; line-height: 1.12; max-width: 14em; }
.sous { margin: 14px 0 0; text-align: center; color: var(--encre-2); font-size: 16px; max-width: 34em; }

.principal { margin-top: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; color: #fff; font-family: var(--font-titre); font-weight: 800; font-size: 16px; background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); box-shadow: 0 8px 20px -8px rgba(109,40,217,.55); transition: transform 120ms ease, box-shadow 120ms ease; }
.principal:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(109,40,217,.6); }
.principal:active { transform: translateY(0); }
.principal[hidden] { display: none; }
.principal:focus-visible, .carte:focus-visible, .lien:focus-visible, .langues button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.installee { margin-top: 26px; display: none; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: #E7F9EC; color: #17803D; font-weight: 600; }
.installee.visible { display: inline-flex; }

.cartes { margin: 36px 0 0; padding: 0; list-style: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte { width: 100%; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 12px 16px; border: 1px solid var(--filet); border-radius: 16px; background: var(--carte); text-align: center; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; }
.carte:hover { background: var(--pose-forte); transform: translateY(-1px); }
.carte[aria-pressed="true"] { background: var(--lilas-doux); border-color: var(--lilas); }
.carte.ici { border-color: var(--lilas); }
.carte svg { width: 32px; height: 32px; color: var(--encre); }
.carte b { font-family: var(--font-titre); font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; }
.carte small { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.carte .ici-pastille { display: none; font-size: 11.5px; font-weight: 600; color: var(--encre-3); }
.carte.ici .ici-pastille { display: block; }

.panneau { display: none; width: 100%; margin-top: 16px; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--filet); box-shadow: 0 1px 2px rgba(20,24,32,.05), 0 6px 18px -12px rgba(20,24,32,.2); animation: monte 360ms var(--entree) both; }
.panneau.ouvert { display: block; }
.panneau-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panneau h2 { margin: 0; font-family: var(--font-titre); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.panneau .note { margin: 6px 0 0; color: var(--encre-2); font-size: 14.5px; }
.fermer { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--carte); display: grid; place-items: center; }
.fermer:hover { background: var(--pose-forte); }
.etapes { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: pas; display: flex; flex-direction: column; gap: 10px; }
.etapes li { position: relative; padding-left: 40px; font-size: 15.5px; }
.etapes li::before { counter-increment: pas; content: counter(pas); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lilas-doux); color: var(--accent); font-family: var(--font-titre); font-weight: 800; font-size: 13px; }
.panneau .principal { margin-top: 18px; min-height: 46px; font-size: 15px; }
.qr[hidden] { display: none; }
.qr { margin-top: 18px; display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; background: var(--carte); }
.qr svg { flex: none; width: 112px; height: 112px; background: #fff; padding: 8px; border-radius: 10px; }
.qr p { margin: 0; font-size: 14.5px; color: var(--encre-2); }

.beta { margin: 34px 0 0; display: flex; align-items: flex-start; gap: 8px; max-width: 34em; color: var(--encre-2); font-size: 13.5px; }
.beta svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--encre-3); }
.beta b { color: var(--encre); font-weight: 600; }

footer { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--encre-3); }
.lien { text-decoration: none; font-weight: 600; }
.lien:hover { text-decoration: underline; }
.langues { display: inline-flex; gap: 4px; }
.langues button { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font-weight: 600; color: var(--encre-3); }
.langues button[aria-current="true"] { color: var(--encre); background: var(--carte); }

@keyframes bat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.07); } 45% { transform: scale(.99); } }
@keyframes pulse-anneau { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes souffle { 0%, 100% { transform: translateX(-50%) scale(.96); opacity: .9; } 50% { transform: translateX(-50%) scale(1.05); opacity: 1; } }
@keyframes derive { 0% { transform: translate(0, 0); } 100% { transform: translate(-6%, 8%); } }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .disque, .anneau, .halo, .nom, .produit, .panneau { animation: none; }
  .anneau { opacity: 0; }
}