/* Page de téléchargement Téléphone — smartphone d'abord.
   Clair / sombre selon prefers-color-scheme. */
:root {
  --accent: #3563E9;
  --accent-fonce: #2448b8;
  --accent-texte: #2a54d6;
  --accent-pale: #e8eefc;
  --bandeau: #1c2230;
  --bandeau-sous: #c9cfdb;
  --fond: #f4f5f8;
  --carte: #ffffff;
  --texte: #1f2430;
  --texte-doux: #5a6172;
  --bord: #dfe3ea;
  --vert: #2e7d32;
  --erreur: #c62828;
  --erreur-pale: #fdecec;
  --info: #fff5d6;
  --info-bord: #e8c766;
  --q-faire: #E5484D;
  --q-planifier: #3B82F6;
  --q-deleguer: #F59E0B;
  --q-eliminer: #8B95A7;
  --beta: #7c4dff;
  --alpha: #d81b60;
  --fondateur: #8e24aa;
  --rayon: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #5b82f0;
    --accent-fonce: #3f68e0;
    --accent-texte: #9db4ff;
    --accent-pale: #1f2a44;
    --bandeau: #0d1018;
    --fond: #11141a;
    --carte: #1b1f28;
    --texte: #e8eaf0;
    --texte-doux: #a7aebd;
    --bord: #323848;
    --vert: #81c784;
    --erreur: #ef9a9a;
    --erreur-pale: #3a1d1e;
    --info: #3a321a;
    --info-bord: #8a7432;
    --beta: #b39dff;
    --alpha: #f48fb1;
    --fondateur: #ce93d8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--texte);
}
a { color: var(--accent-texte); }
code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .88em;
  background: var(--accent-pale);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* Bandeau */
.bandeau { background: var(--bandeau); color: #fff; }
.bandeau-int {
  max-width: 760px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.marque { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marque img { border-radius: 10px; flex: none; }
.marque-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marque-nom { font-size: 1.2rem; font-weight: 700; letter-spacing: .2px; }
.marque-sous { font-size: .75rem; color: var(--bandeau-sous); }
.compte-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.entete-nom { font-size: .85rem; color: var(--bandeau-sous); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-entete {
  font: inherit; font-size: .85rem; color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-entete:hover, .btn-entete:focus-visible { background: rgba(255,255,255,.15); }

/* Contenu */
main { max-width: 760px; margin: 0 auto; padding: 16px; }
.intro h1 { margin: 6px 0 6px; font-size: 1.6rem; color: var(--accent-texte); }
.intro p { margin: 0 0 12px; color: var(--texte-doux); }
.quadrants {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.q {
  border-radius: 10px; padding: 8px 10px; color: #fff;
  display: flex; flex-direction: column; line-height: 1.25;
}
.q span { font-size: .8rem; opacity: .95; }
.q-faire { background: var(--q-faire); }
.q-planifier { background: var(--q-planifier); }
.q-deleguer { background: var(--q-deleguer); color: #1f2430; }
.q-eliminer { background: var(--q-eliminer); color: #1f2430; }
.atouts { margin: 0 0 16px; padding-left: 20px; color: var(--texte-doux); font-size: .95rem; }
.atouts li { margin: 4px 0; }
.atouts strong { color: var(--texte); }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px; margin: 0 0 16px;
}
.carte h2 { margin: 0 0 6px; font-size: 1.2rem; }
.carte h3 { margin: 16px 0 6px; font-size: 1rem; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.carte-beta { box-shadow: inset 4px 0 0 var(--beta); }
.carte-alpha { box-shadow: inset 4px 0 0 var(--alpha); }
.carte-anciennes { box-shadow: inset 4px 0 0 var(--fondateur); }
.carte-web { box-shadow: inset 4px 0 0 var(--accent); }
.pastille {
  display: inline-block; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: .85rem; font-weight: 600;
}
.pastille-beta { background: var(--beta); color: #fff; }
.pastille-alpha { background: var(--alpha); color: #fff; }
.pastille-fondateur { background: var(--fondateur); color: #fff; }
@media (prefers-color-scheme: dark) {
  .pastille-beta, .pastille-alpha, .pastille-fondateur { color: #1b1f28; }
}
#anciennes-bouton { margin: 4px 0 8px; }
#anciennes-liste { margin-top: 8px; }
a[aria-busy="true"] { opacity: .6; cursor: progress; }
.sous { color: var(--texte-doux); font-size: .9rem; margin: 4px 0; }
.notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.chargement { color: var(--texte-doux); text-align: center; padding: 20px 0; }

/* Boutons */
.boutons { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.btn {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 12px 16px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn-principal { background: var(--accent); color: #fff; font-weight: 600; }
.btn-principal:hover, .btn-principal:focus-visible { background: var(--accent-fonce); }
.btn-secondaire { background: transparent; color: var(--accent-texte); border-color: var(--accent-texte); font-weight: 600; }
.btn-lien { background: none; border: none; color: var(--accent-texte); padding: 8px 4px; text-decoration: underline; }
.btn-dl { flex-direction: column; gap: 0; }
.btn-dl .btn-titre { font-size: 1.05rem; }
.btn-dl .btn-detail { font-size: .8rem; font-weight: 400; opacity: .9; }
.lien-secondaire { font-size: .9rem; text-align: center; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Empreintes */
.empreintes { margin-top: 14px; }
.empreintes summary { cursor: pointer; color: var(--texte-doux); font-size: .9rem; }
.empreinte { margin: 8px 0; font-size: .85rem; }
.empreinte-nom { font-weight: 600; overflow-wrap: anywhere; }
.empreinte code { display: block; margin-top: 2px; padding: 4px 6px; }

/* Listes de versions */
.liste-versions details { border-top: 1px solid var(--bord); padding: 8px 0; }
.liste-versions details:first-child { border-top: none; }
.liste-versions summary { cursor: pointer; font-weight: 600; }
.liste-versions summary .sous { font-weight: 400; margin-left: 6px; }
.liens-fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.liens-fichiers .btn { padding: 8px 12px; font-size: .9rem; }

/* Étapes */
.etapes { padding-left: 22px; margin: 6px 0; }
.etapes li { margin: 4px 0; }

/* Formulaires */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin: 8px 0 12px; }
.onglet {
  font: inherit; flex: 1; background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 6px; cursor: pointer; color: var(--texte-doux); font-weight: 600;
}
.onglet[aria-selected="true"] { color: var(--accent-texte); border-bottom-color: var(--accent-texte); }
.formulaire { display: flex; flex-direction: column; gap: 4px; }
.formulaire label { font-weight: 600; margin-top: 8px; font-size: .95rem; }
.formulaire input[type="email"], .formulaire input[type="text"], .formulaire input[type="password"] {
  font: inherit; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--bord);
  background: var(--fond); color: var(--texte); width: 100%;
}
.formulaire input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulaire .btn-principal { margin-top: 12px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.case input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.aide { font-weight: 400; color: var(--texte-doux); font-size: .82rem; margin: 2px 0 0; }
.message { min-height: 1.2em; margin: 8px 0 0; font-size: .92rem; }
.message.ok { color: var(--vert); }
.message.ko { color: var(--erreur); }

.alerte {
  background: var(--erreur-pale); border: 1px solid var(--erreur); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 16px;
}
.alerte-info { background: var(--info); border-color: var(--info-bord); }
.alerte p { margin: 0 0 8px; }

.conditions p { font-size: .9rem; color: var(--texte-doux); }

.pied { text-align: center; color: var(--texte-doux); font-size: .8rem; padding: 8px 16px 28px; }

[hidden] { display: none !important; }

@media (max-width: 460px) {
  .entete-nom { display: none; }
  .marque-sous { display: none; }
  .marque-nom { font-size: 1.05rem; }
  .btn-entete { padding: 5px 10px; }
}

@media (min-width: 600px) {
  .boutons { flex-direction: row; flex-wrap: wrap; }
  .boutons > .btn { flex: 1 1 240px; }
  .lien-secondaire { flex-basis: 100%; }
  .intro h1 { font-size: 1.9rem; }
  .quadrants { grid-template-columns: repeat(4, 1fr); }
}