/* ==================================================================
   TRADELYS — page d'accès unique `/acces`
   ------------------------------------------------------------------
   Feuille de style ADDITIONNELLE : elle ne modifie aucune règle de
   `styles.css`, elle n'ajoute que ce qui est propre à cette page.
   Palette du logo : marine #0A1931, or #D4AF37, crème #F4E7C8.
   ================================================================== */

.acces-page { background: #0A1931; }

/* --- En-tête de la page ------------------------------------------- */

.acces-entete h1 { margin-bottom: .6rem; }
.acces-entete .lead { max-width: 62ch; }

.acces-avis {
  margin-top: 1.4rem;
  max-width: 68ch;
  padding: .9rem 1.1rem;
  border-left: 4px solid #D4AF37;
  background: rgba(212, 175, 55, .10);
  border-radius: 0 .4rem .4rem 0;
  color: #F4E7C8;
  font-size: .98rem;
  line-height: 1.55;
}
.acces-avis--alerte { border-left-color: #E4756B; background: rgba(228, 117, 107, .14); }

.acces-note {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  border-left: 4px solid #D4AF37;
  background: rgba(212, 175, 55, .08);
  border-radius: 0 .4rem .4rem 0;
  max-width: 76ch;
}

/* --- Les cinq types de compte ------------------------------------- */

.acces-types {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.acces-types__attente { color: #4a5568; font-style: italic; }

.acces-type {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
  padding: 1.2rem 1.2rem 1.1rem;
  border: 1px solid #d8d2c4;
  border-radius: .6rem;
  background: #fffdf7;
  box-shadow: 0 1px 0 rgba(10, 25, 49, .04);
}
.acces-type__ico {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: #0A1931;
}
.acces-type__ico svg { width: 100%; height: 100%; display: block; }
.acces-type h3 { margin: 0; font-size: 1.15rem; color: #0A1931; }
.acces-type__sous { margin: 0; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: #8a6d1f; font-weight: 700; }
.acces-type__desc { margin: 0; font-size: .95rem; line-height: 1.5; color: #333c4d; flex: 1 1 auto; }
.acces-type__meta { margin: 0; font-size: .84rem; color: #4a5568; }
.acces-type__meta strong { color: #0A1931; }
.acces-type .btn { align-self: flex-start; margin-top: .3rem; }

/* --- Fil des étapes ----------------------------------------------- */

.acces-etapes {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.acces-etapes li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 231, 200, .28);
  font-size: .85rem;
  color: rgba(244, 231, 200, .72);
}
.acces-etapes li[aria-current="step"] {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, .14);
  color: #F4E7C8;
  font-weight: 700;
}
.acces-etapes li[data-fait="oui"] { border-color: rgba(122, 197, 138, .5); color: #A9D8B4; }
.acces-etapes__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(244, 231, 200, .14);
  font-size: .78rem;
  font-weight: 700;
}

/* --- Panneau de connexion ----------------------------------------- */

.acces-panneau {
  padding: 1.6rem clamp(1rem, 2.4vw, 2rem);
  border: 1px solid rgba(244, 231, 200, .2);
  border-radius: .7rem;
  background: rgba(255, 255, 255, .04);
  max-width: 62rem;
}
.acces-panneau h2 { margin-top: .2rem; }
.acces-panneau .eyebrow { margin-bottom: .2rem; }

.acces-champ { margin: 1rem 0; max-width: 30rem; }
.acces-champ label { display: block; font-weight: 700; color: #F4E7C8; margin-bottom: .3rem; }
.acces-champ .aide { display: block; font-size: .86rem; color: rgba(244, 231, 200, .72); margin-top: .3rem; }
.acces-champ input[type="text"],
.acces-champ input[type="password"],
.acces-champ input[type="number"] {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1.05rem;
  font-family: inherit;
  color: #0A1931;
  background: #FFFDF7;
  border: 2px solid #d8d2c4;
  border-radius: .4rem;
}
.acces-champ input:focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 1px;
  border-color: #0A1931;
}
.acces-champ--code input { letter-spacing: .5em; font-size: 1.4rem; text-align: center; max-width: 12rem; }

.acces-case { display: flex; gap: .6rem; align-items: flex-start; max-width: 34rem; margin: 1rem 0; }
.acces-case input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.acces-case label { color: #F4E7C8; font-size: .95rem; line-height: 1.45; }

.acces-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.3rem; }

.acces-message { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: .4rem; font-size: .95rem; max-width: 64ch; }
.acces-erreur { margin-top: 1rem; padding: .75rem .95rem; border-radius: .4rem; background: rgba(228, 117, 107, .16); border-left: 4px solid #E4756B; color: #FFD9D4; }
.acces-succes { margin-top: 1rem; padding: .75rem .95rem; border-radius: .4rem; background: rgba(122, 197, 138, .16); border-left: 4px solid #7AC58A; color: #D7F2DD; }

.acces-retour { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* --- Liste des membres d'un espace reconnu ------------------------ */

.acces-membres { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.acces-membre {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1rem .8rem;
  border: 2px solid rgba(244, 231, 200, .25);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .05);
  color: #F4E7C8;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.acces-membre:hover, .acces-membre:focus-visible { border-color: #D4AF37; background: rgba(212, 175, 55, .12); }
.acces-membre strong { font-size: 1.05rem; }
.acces-membre span { font-size: .82rem; color: rgba(244, 231, 200, .7); }
.acces-membre__jeton { font-size: 1.5rem; line-height: 1; }

/* --- Grille des pictogrammes (code en images, 6-8 ans) ------------ */

.acces-images { margin: 1.1rem 0 0; }
.acces-images__suite { display: flex; gap: .5rem; margin: 0 0 1rem; }
.acces-images__case {
  width: 3.2rem; height: 3.2rem; border-radius: .5rem;
  border: 2px dashed rgba(244, 231, 200, .4);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05);
}
.acces-images__case[data-remplie="oui"] { border-style: solid; border-color: #D4AF37; background: rgba(212, 175, 55, .12); }
.acces-images__case svg { width: 2.2rem; height: 2.2rem; }

.acces-images__grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  max-width: 46rem;
}
.acces-images__bouton {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .5rem;
  border: 2px solid rgba(244, 231, 200, .25);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .05);
  color: #F4E7C8; font: inherit; font-size: .82rem; cursor: pointer;
}
.acces-images__bouton:hover, .acces-images__bouton:focus-visible { border-color: #D4AF37; background: rgba(212, 175, 55, .12); }
.acces-images__bouton svg { width: 2.8rem; height: 2.8rem; display: block; }

/* --- Pavé numérique ----------------------------------------------- */

.acces-pave { display: grid; grid-template-columns: repeat(3, 4rem); gap: .5rem; margin-top: 1rem; }
.acces-pave button {
  height: 3.2rem; font-size: 1.3rem; font-family: inherit; font-weight: 700;
  color: #0A1931; background: #F4E7C8;
  border: 2px solid #d8d2c4; border-radius: .5rem; cursor: pointer;
}
.acces-pave button:hover, .acces-pave button:focus-visible { background: #D4AF37; border-color: #0A1931; }
.acces-points { display: flex; gap: .6rem; margin: .9rem 0 .2rem; }
.acces-points i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #D4AF37; display: inline-block; }
.acces-points i.rempli { background: #D4AF37; }

/* --- Règles communes ---------------------------------------------- */

.acces-regles { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.acces-regles li { padding: 1.1rem 1.2rem; border: 1px solid #d8d2c4; border-radius: .6rem; background: #fffdf7; }
.acces-regles h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: #0A1931; }
.acces-regles p { margin: 0; font-size: .93rem; line-height: 1.5; color: #333c4d; }
.acces-regles__preuve { display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed #d8d2c4; font-size: .84rem; color: #4a5568; }

/* --- Deux colonnes « enfant / élève » ----------------------------- */

.acces-deux-colonnes { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 860px) { .acces-deux-colonnes { grid-template-columns: 1fr 1fr; } }
.acces-deux-colonnes h3 { color: #D4AF37; margin-top: 0; }
.acces-deux-colonnes p { max-width: 60ch; }

/* --- Feuille d'invitations (impression) --------------------------- */

@media print {
  .site-header, .site-footer, .acces-retour, .skip-link, .acces-pave { display: none !important; }
  body, .section, .section--dark, .section--paper { background: #fff !important; color: #000 !important; }
  .acces-panneau, .acces-regles li, .acces-type { border-color: #666 !important; background: #fff !important; }
}