/* La page d'accueil du site — et elle seule.
 *
 * LES COULEURS NE SONT PAS REDÉFINIES ICI. base.css porte la palette et le
 * basculement clair/sombre pour toute l'application ; en réécrire une seconde
 * ici ferait deux vérités à tenir d'accord, et c'est exactement la dérive que
 * le projet a déjà payée sur les menus. On emprunte, on ne recopie pas.
 *
 * En revanche, base.css met <body> en display:flex pour centrer le boîtier du
 * Pokédex. Cette page-ci n'a pas de boîtier : elle reprend la main dessus. */

body.page-accueil{
  display:block;
  min-height:100vh;
  margin:0;
  padding:0;
  /* Deux lueurs plutôt qu'une : la rouge du boîtier en haut à gauche, l'or de
     la forme chromatique en bas à droite. Ce sont les deux couleurs que
     l'application emploie pour dire « possédé », et la page s'ouvre donc sur
     son propre vocabulaire. */
  background:
    radial-gradient(900px 520px at 12% -8%,
      color-mix(in srgb, var(--dex-red) 26%, transparent) 0%, transparent 68%),
    radial-gradient(760px 460px at 92% 8%,
      color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 62%),
    var(--screen-edge);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
}

.acc{
  max-width:1080px;
  margin:0 auto;
  padding:56px 24px 44px;
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* ════ L'entrée ═══════════════════════════════════════════════════════════ */

/* UNE SEULE COLONNE, DONC CENTRÉE. L'en-tête tenait sur deux colonnes tant
   qu'une vitrine occupait la droite ; sans elle, un bloc aligné à gauche sur
   une page de 1 080 px laisse une moitié vide qui ne dit rien. */
.acc-tete{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:14px 0 8px;
}

.acc-marque{ display:flex; align-items:center; gap:16px; }
/* .dex-lens vient de base.css : c'est l'objectif du boîtier, et le site n'a
   aucune raison d'en dessiner un second. Il est un peu plus grand ici, la
   page n'ayant pas la contrainte de hauteur de la barre du Pokédex. */
.acc-marque .dex-lens{ width:58px; height:58px; }
.acc-titres{ display:flex; flex-direction:column; gap:3px; }
.acc-eyebrow{
  font-family:var(--font-data);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--ink-faint);
}
.acc-titre{
  font-family:var(--font-body);
  font-size:clamp(32px, 4.4vw, 44px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink);
  margin:0; line-height:1.02;
}
.acc-phrase{
  font-size:clamp(15px, 1.6vw, 18px); line-height:1.55; color:var(--ink-soft);
  margin:22px auto 28px; max-width:56ch;
}

/* ---- Les portes ---- */

.acc-portes{ display:flex; flex-direction:column; gap:12px; align-items:center; }

/* Le bleu de Discord, et pas une couleur du projet : c'est le bouton d'un
   service tiers, et le reconnaître avant de le lire fait partie de ce qui
   rassure au moment de confier un compte. */
.acc-discord{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--font-body); font-size:16px; font-weight:700;
  color:#fff; background:#5865f2;
  border:none; border-radius:12px;
  padding:16px 28px;
  cursor:pointer;
  box-shadow:0 14px 30px -18px #5865f2;
  transition:background 120ms, transform 80ms;
}
.acc-discord:hover:not(:disabled){ background:#4752c4; }
.acc-discord:active:not(:disabled){ transform:translateY(1px); }
.acc-discord:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }
.acc-discord:disabled{ opacity:.7; cursor:progress; }
.acc-discord svg{ width:24px; height:auto; flex-shrink:0; }
/* Déjà connecté : le bouton n'ouvre plus une session, il ouvre le Pokédex.
   Il quitte donc le bleu de Discord, qui ne veut plus rien dire ici. */
.acc-discord-ouvrir{ background:var(--dex-red); box-shadow:none; }
.acc-discord-ouvrir:hover:not(:disabled){ background:var(--dex-red-deep); }

.acc-erreur{
  margin:0;
  font-size:13.5px; line-height:1.5;
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius:8px;
  padding:9px 12px;
  max-width:52ch;
}

.acc-portes-secondaires{ display:flex; gap:10px; flex-wrap:wrap; }
/* Un lien qui porte la mise en forme d'un bouton. Pas .toggle-btn : celui-là
   ne pose pas de display, et il est taillé pour la barre d'outils du Pokédex,
   où il voisine des boutons de 13 px. */
.acc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-body); font-size:14.5px; font-weight:600;
  color:var(--ink); text-decoration:none;
  background:var(--card);
  border:1.5px solid var(--card-border);
  border-radius:12px;
  padding:14px 20px;
  transition:border-color 150ms, background 150ms, transform 80ms;
}
.acc-btn:hover{ border-color:var(--chrome-lo); }
.acc-btn:active{ transform:translateY(1px); }
.acc-btn:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }
.acc-btn small{
  font-family:var(--font-data); font-size:11px; font-weight:500;
  color:var(--ink-faint);
}

.acc-note{
  font-size:13px; line-height:1.55; color:var(--ink-faint);
  margin:6px auto 0; max-width:54ch;
}

/* ════ Les chiffres ═══════════════════════════════════════════════════════ */

/* CE BLOC A CHANGÉ DE RÔLE. Il complétait une vitrine ; il est maintenant la
   première chose qu'on voit après le titre, et c'est lui qui doit donner sa
   mesure au projet. D'où un seul panneau plutôt que quatre cartes flottantes :
   quatre chiffres séparés par un filet se lisent comme un relevé, quatre
   cartes se lisent comme quatre choses sans rapport.

   Le nombre vient d'abord et en grand, l'unité juste dessous, et la précision
   en petit — on doit pouvoir ne lire que les chiffres et avoir compris. */
.acc-chiffres{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  overflow:hidden;
}
.acc-chiffre{
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  padding:26px 18px 24px;
  text-align:center;
  /* Le filet vit sur la case, pas sur le conteneur : il disparaît tout seul
     quand la grille se replie en deux colonnes. */
  border-left:1px solid var(--card-border);
}
.acc-chiffre:first-child{ border-left:none; }
.acc-chiffre b{
  font-family:var(--font-body);
  font-size:clamp(30px, 3.4vw, 40px); font-weight:800; letter-spacing:-.03em;
  color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums;
}
.acc-chiffre span{
  font-family:var(--font-data);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--gold);
  margin-top:8px;
}
.acc-chiffre em{
  font-style:normal;
  font-size:12px; line-height:1.45; color:var(--ink-faint);
  margin-top:7px; max-width:22ch;
}

/* ════ Les titres de section ══════════════════════════════════════════════ */

.acc-section-tete{ margin-bottom:20px; }
.acc-section-titre{
  font-family:var(--font-body);
  font-size:24px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 8px;
}
.acc-section-mot{
  font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:0; max-width:66ch;
}

/* ════ Les jeux ═══════════════════════════════════════════════════════════ */

.acc-jeux{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:10px;
}
.acc-jeu{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:14px 12px 12px;
  text-align:center;
  transition:border-color 150ms, transform 120ms;
}
.acc-jeu:hover{ border-color:var(--chrome-lo); transform:translateY(-2px); }
.acc-jeu img{
  width:100%; max-width:132px; height:auto;
  margin-bottom:6px;
}
.acc-jeu b{
  font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25;
}
.acc-jeu span{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}

/* ════ Ce que ça fait ═════════════════════════════════════════════════════ */

.acc-quoi{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:14px;
}
.acc-carte{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:20px 22px;
}
.acc-carte-icone{
  font-size:17px; line-height:1;
  margin-bottom:11px;
  letter-spacing:.08em;
}
.acc-carte h3{
  font-family:var(--font-body);
  font-size:15.5px; font-weight:700; color:var(--ink);
  margin:0 0 7px; line-height:1.3;
}
.acc-carte p{
  font-size:13.5px; line-height:1.6; color:var(--ink-soft);
  margin:0;
}

/* ════ Le téléchargement ══════════════════════════════════════════════════ */

/* Le seul bloc qui porte la couleur du boîtier plutôt que celle des cartes :
   c'est le geste qu'on veut voir de loin en parcourant la page, et il ne se
   confond alors avec aucune section de lecture. */
.acc-telecharger{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:30px;
  align-items:center;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--dex-red) 22%, var(--card)) 0%,
    var(--card) 62%);
  border:1px solid color-mix(in srgb, var(--dex-red) 35%, var(--card-border));
  border-radius:16px;
  padding:30px 32px;
}
.acc-telecharger .acc-section-titre{ margin-bottom:9px; }
.acc-tel-mot p{
  font-size:14px; line-height:1.62; color:var(--ink-soft);
  margin:0 0 10px; max-width:56ch;
}
.acc-tel-detail{
  font-family:var(--font-data); font-size:11.5px !important;
  color:var(--ink-faint) !important; margin:0 !important;
}
.acc-tel-action{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.acc-tel-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:16px; font-weight:700;
  color:#fff; text-decoration:none;
  background:var(--dex-red);
  border:none; border-radius:12px;
  padding:17px 26px;
  box-shadow:0 16px 34px -20px var(--dex-red);
  transition:background 120ms, transform 80ms;
}
.acc-tel-btn:hover{ background:var(--dex-red-deep); }
.acc-tel-btn:active{ transform:translateY(1px); }
.acc-tel-btn:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }
/* La marche à suivre pour lancer l'installateur. Plus lisible que la mention
   en dessous, et moins qu'un avertissement : ce n'est pas un danger, c'est un
   geste. D'où le fond discret plutôt qu'une couleur d'alerte — un bandeau
   rouge sous un bouton de téléchargement ferait fuir ceux qu'il veut aider. */
.acc-tel-lancer{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 10px;
  padding:10px 13px;
  border-radius:10px;
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  text-align:left;
}
/* Les deux obstacles dans un SEUL cadre. Deux encadres dores l'un sur l'autre
   sous un bouton de telechargement se lisent comme une mise en garde qui
   s'allonge — or ce sont deux gestes, pas deux dangers. */
.acc-tel-lancer p{ margin:0; }
.acc-tel-lancer strong{ color:var(--ink); }
.acc-tel-lancer em{ font-style:normal; font-weight:600; color:var(--ink); }
.acc-tel-lancer a{ color:var(--gold-deep); }

.acc-tel-note{
  font-size:12px; line-height:1.5; color:var(--ink-faint);
  margin:0; text-align:center;
}

/* ════ Le site et l'application ═══════════════════════════════════════════ */

.acc-deux{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:26px 28px;
}
.acc-deux-corps{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:28px;
  align-items:start;
}
.acc-deux p{
  font-size:14px; line-height:1.62; color:var(--ink-soft);
  margin:0 0 12px;
}
.acc-deux p:last-child{ margin-bottom:0; }
.acc-deux b{ color:var(--ink); font-weight:700; }
.acc-deux-liste{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.acc-deux-liste li{
  font-size:13px; line-height:1.5; color:var(--ink-soft);
  background:var(--screen);
  border-radius:9px;
  padding:11px 13px;
}
.acc-deux-liste b{ display:block; margin-bottom:2px; }

/* ════ Le pied ════════════════════════════════════════════════════════════ */

.acc-pied{
  display:flex; flex-direction:column; gap:5px;
  border-top:1px solid var(--card-border);
  padding-top:22px;
  font-family:var(--font-data);
  font-size:11.5px; line-height:1.6; color:var(--ink-faint);
}
.acc-pied-releve{ opacity:.78; }

/* ════ Étroit ═════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  /* La vitrine passe SOUS le texte, et non à côté : à cette largeur, deux
     colonnes donnent deux moitiés trop étroites pour l'une comme pour
     l'autre. */
  .acc-tete{ grid-template-columns:1fr; gap:34px; }
  .acc-deux-corps{ grid-template-columns:1fr; gap:20px; }
  .acc-telecharger{ grid-template-columns:1fr; gap:22px; }
}

/* Sur telephone, le pied prenait cent vingt pixels en bas de page. La mention
   reste lisible et reste obligatoire ; elle n'a pas a occuper un sixieme de
   l'ecran. La regle est ici et non dans site.css : la page d'accueil ne charge
   pas cette feuille-la, elle n'a pas de boitier a habiller. */
@media (max-width:480px){
  .acc-pied{ font-size:9.5px; line-height:1.4; padding-top:14px; }
}

@media (max-width:560px){
  .acc{ padding:32px 16px 30px; gap:40px; }
  .acc-marque .dex-lens{ width:46px; height:46px; }
  .acc-phrase{ margin:16px 0 22px; }
  .acc-discord{ width:100%; }
  /* Deux boutons côte à côte à 375 px donnent deux colonnes de six
     caractères. Ils passent l'un sous l'autre, pleine largeur. */
  .acc-portes-secondaires{ flex-direction:column; align-items:stretch; width:100%; }
  .acc-section-titre{ font-size:20px; }
  .acc-chiffres{ grid-template-columns:repeat(2, 1fr); }
  /* En deux colonnes, le filet de gauche revient sur la troisieme case :
     c'est la premiere de sa rangee. */
  .acc-chiffre:nth-child(odd){ border-left:none; }
  .acc-chiffre:nth-child(n+3){ border-top:1px solid var(--card-border); }
  .acc-chiffre{ padding:18px 12px 16px; }
  .acc-chiffre em{ font-size:11px; }
  .acc-jeux{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:8px; }
  .acc-deux{ padding:19px 18px; }
  .acc-telecharger{ padding:22px 19px; }
}