/* =====================================================================
   Lot 047 : page de connexion « les 5 univers » (CP -> CM2)
   Chargée après matalo.css par eleve_connexion.html et prof_connexion.html.
   Toutes les classes commencent par cx- (aucun conflit avec matalo.css).
   17/10 (v2) : tout tient sur un écran d'ordinateur sans faire défiler ;
   police Montserrat (classique, lisible) pour « Matalo » et « Un univers pour chaque classe » ;
   la mascotte est dans le cadre de connexion ; un garçon et une fille par univers.
   ===================================================================== */

.cx {
  margin: 0;
  color: var(--encre);
  background: #1b1f4b;
  overflow-x: hidden;
}

.cx-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center;
  gap: clamp(6px, 1.6vh, 18px);
  padding: clamp(8px, 2vh, 22px) 16px clamp(8px, 1.6vh, 16px);
  background:
    radial-gradient(2px 2px at 88% 12%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 94% 30%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 80% 6%, #ffe9a8 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 97% 48%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 84% 40%, #cfd6ff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 91% 70%, #fff 60%, transparent 61%),
    linear-gradient(100deg, #fde3a0 0%, #b9e3a0 20%, #5fbf8f 40%, #36b0c6 60%, #3554a8 80%, #1b1f4b 100%);
}

/* ---------- En-tête ---------- */
.cx-entete { text-align: center; color: #fff; }
.cx-logo {
  font-family: "Montserrat", "Fredoka", system-ui, sans-serif; font-weight: 800; margin: 0; line-height: 1;
  font-size: clamp(2.2rem, 7vh, 3.8rem); letter-spacing: .5px; color: #fff;
  text-shadow: 0 2px 0 rgba(16,38,61,.35), 0 6px 18px rgba(0,0,0,.28);
}
.cx-devise { margin: 4px 0 0; font-weight: 600; font-size: clamp(.92rem, 2vh, 1.1rem); text-shadow: 0 1px 0 rgba(63,36,18,.6), 0 2px 8px rgba(0,0,0,.45); }

/* ---------- Zone centrale : rond / boîte / rond ---------- */
.cx-centre { display: grid; grid-template-columns: 1fr minmax(0, 430px) 1fr; align-items: center; gap: 28px; width: min(1100px, 100%); }
.cx-centre > .cx-rond:first-child { justify-self: end; }
.cx-centre > .cx-rond:last-child { justify-self: start; }

/* Les deux cercles */
.cx-rond {
  --t: clamp(120px, 21vh, 164px);
  position: relative; width: var(--t); height: var(--t); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; color: var(--encre); padding: 14px;
  transition: transform .2s ease;
  box-shadow: 0 8px 0 rgba(0,0,0,.18), 0 16px 30px -12px rgba(0,0,0,.45);
}
.cx-rond:hover { transform: translateY(-4px) rotate(-3deg); }
.cx-rond:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.cx-rond i { font-size: clamp(1.4rem, 3.4vh, 1.9rem); margin-bottom: 2px; }
.cx-rond b { font-size: clamp(.92rem, 2.2vh, 1.1rem); line-height: 1.1; }
.cx-rond small { display: block; margin-top: 3px; font-size: .72rem; font-weight: 600; opacity: .85; max-width: 96px; }
.cx-rond-decouvrir {
  background:
    radial-gradient(circle, #fffaf0 0 64%, transparent 64.5%),
    conic-gradient(from -90deg, #e9a23b 0 20%, #7a1f2f 0 40%, #2f8a3e 0 60%, #1fa3b8 0 80%, #3b3f9e 0 100%);
}
.cx-rond-decouvrir i { color: var(--ocean-700); }
.cx-rond-decouvrir .cx-mini { position: absolute; width: 30%; height: 30%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.cx-rond-decouvrir .cx-mini.a { top: -6%; left: -4%; }
.cx-rond-decouvrir .cx-mini.b { bottom: -5%; right: -5%; }
.cx-rond-formules {
  background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd23f 45%, #e8a20c 75%, #b67a00);
  border: 5px solid #fff1b0; color: #5a3600;
}
.cx-rond-formules::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(122,72,0,.45); }
.cx-rond-formules i { color: #7a4800; }
.cx-rond-formules .cx-oeuf { position: absolute; width: 30%; top: -9%; right: 0; transform: rotate(14deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }

/* ---------- La boîte de connexion ---------- */
.cx-boite { position: relative; width: 100%; }
.cx-onglets { display: flex; justify-content: center; gap: 8px; margin-bottom: -6px; position: relative; z-index: 2; }
.cx-onglets a { text-decoration: none; padding: 8px 20px 13px; border-radius: 14px 14px 0 0; font-weight: 700; color: #fff; background: rgba(16,38,61,.55); transition: background .2s; }
.cx-onglets a:hover { background: rgba(16,38,61,.78); }
.cx-onglets a.actif { background: var(--parchemin); color: var(--bois-700); }

.cx-carte { padding: clamp(14px, 2.4vh, 22px) 26px clamp(12px, 2.2vh, 20px); text-align: center; }

/* La mascotte est DANS le cadre : elle ne prend plus de hauteur en plus */
.cx-mascotte { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(10px, 1.8vh, 16px); text-align: left; min-height: 64px; }
.cx-mascotte .cx-tete { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, var(--m-fond, #ffe9b0)); border: 3px solid #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); display: grid; place-items: center; overflow: hidden; flex: none; transition: background .4s; }
.cx-mascotte .cx-tete img { width: 110%; height: 110%; object-fit: contain; transition: opacity .3s, transform .3s; }
.cx-mascotte .bulle { flex: 1; font-size: .92rem; line-height: 1.3; padding: 8px 12px; box-shadow: 0 2px 0 rgba(154,91,46,.18); transition: opacity .3s, transform .3s; }
.cx-mascotte .bulle::after { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.cx-mascotte.change img, .cx-mascotte.change .bulle { opacity: 0; transform: translateY(6px) scale(.95); }

.cx .champ-xl { margin-bottom: clamp(8px, 1.4vh, 12px); }
.cx .champ-xl input { padding-top: clamp(11px, 1.8vh, 15px); padding-bottom: clamp(11px, 1.8vh, 15px); font-size: 1.12rem; }
.cx .cx-carte .btn-xl { padding-top: clamp(11px, 1.8vh, 16px); padding-bottom: clamp(11px, 1.8vh, 16px); }
.cx-aide { margin: clamp(8px, 1.6vh, 14px) 0 0; font-size: .86rem; color: var(--encre-2); }
.cx-aide a { color: var(--ocean-700); font-weight: 600; text-decoration: none; }
.cx-aide a:hover { text-decoration: underline; }

/* ---------- Les 5 univers ---------- */
.cx-univers { width: min(1100px, 100%); text-align: center; }
.cx-univers h2 {
  font-family: "Montserrat", "Fredoka", system-ui, sans-serif; font-weight: 800; letter-spacing: .3px; color: #fff;
  font-size: clamp(1.2rem, 3.3vh, 1.75rem); margin: 0 0 clamp(6px, 1.2vh, 12px);
  text-shadow: 0 3px 0 rgba(63,36,18,.55), 0 6px 14px rgba(0,0,0,.3);
}
.cx-mondes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cx-monde a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  text-decoration: none; color: #fff; padding: clamp(8px, 1.4vh, 12px) 8px clamp(8px, 1.4vh, 12px); border-radius: 20px;
  background: linear-gradient(170deg, var(--c1), var(--c2));
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 14px 26px -12px rgba(0,0,0,.5);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cx-monde a:hover, .cx-monde.actif a { transform: translateY(-6px); border-color: #fff; box-shadow: 0 10px 0 rgba(0,0,0,.18), 0 0 0 4px rgba(255,255,255,.35), 0 20px 30px -12px rgba(0,0,0,.55); }
.cx-monde a:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.cx-visuel { position: relative; width: clamp(74px, 15vh, 124px); aspect-ratio: 1; margin-bottom: 6px; }
.cx-visuel .ile { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.cx-visuel .heros { position: absolute; bottom: -8%; width: 44%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); background: #fff; transition: transform .25s; }
.cx-visuel .heros.g { left: -18%; }
.cx-visuel .heros.f { right: -18%; }
.cx-monde a:hover .heros.g, .cx-monde.actif .heros.g { transform: translateX(-4px) rotate(-8deg); }
.cx-monde a:hover .heros.f, .cx-monde.actif .heros.f { transform: translateX(4px) rotate(8deg); }
.cx-txt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cx-niveau { display: inline-block; background: #fff; color: var(--c2); font-weight: 700; font-size: .85rem; padding: 1px 10px; border-radius: 999px; }
.cx-monde b { font-size: .98rem; line-height: 1.15; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.cx-monde small { font-size: .78rem; font-weight: 600; opacity: .92; }

.cx-monde.cp  { --c1: #f2b84b; --c2: #c0392b; }
.cx-monde.ce1 { --c1: #a8323f; --c2: #4a1f5a; }
.cx-monde.ce2 { --c1: #3fa34d; --c2: #1d5a2a; }
.cx-monde.cm1 { --c1: #2bb6c9; --c2: #0a5e76; }
.cx-monde.cm2 { --c1: #4b4fb8; --c2: #141842; }

/* Écran d'ordinateur peu haut (portable 1366 x 768, 1280 x 720...) :
   les cartes des univers passent à l'horizontale pour que tout tienne sans défiler */
@media (min-width: 961px) and (max-height: 860px) {
  .cx-monde a { flex-direction: row; text-align: left; gap: 18px; padding: 8px 10px 8px 16px; }
  .cx-visuel { width: clamp(64px, 11vh, 92px); flex: none; margin: 0 0 4px; }
  .cx-visuel .heros { width: 42%; }
  .cx-visuel .heros.g { left: -16%; }
  .cx-visuel .heros.f { right: -16%; }
  .cx-txt { align-items: flex-start; }
  .cx-monde b { font-size: .92rem; }
}

@media (min-width: 961px) and (max-height: 700px) {
  .cx-page { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .cx-logo { font-size: 2.3rem; }
  .cx-devise { margin-top: 0; font-size: .9rem; }
  .cx-onglets a { padding: 6px 18px 11px; }
  .cx-carte { padding: 12px 24px 10px; }
  .cx-mascotte { min-height: 52px; margin-bottom: 8px; }
  .cx-mascotte .cx-tete { width: 52px; height: 52px; }
  .cx .champ-xl { margin-bottom: 8px; }
  .cx .champ-xl input { padding-top: 10px; padding-bottom: 10px; }
  .cx .cx-carte .btn-xl { padding-top: 10px; padding-bottom: 10px; }
  .cx-aide { margin-top: 8px; }
  .cx-univers h2 { margin-bottom: 6px; }
}

/* ---------- Pied ---------- */
.cx-pied { color: rgba(255,255,255,.9); font-size: .78rem; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cx-pied a { color: #fff; font-weight: 600; }

/* ---------- Petits écrans (tablette, téléphone) : on peut faire défiler ---------- */
@media (max-width: 960px) {
  .cx-page { grid-template-rows: auto auto auto auto; gap: 16px; padding-bottom: 80px; }
  .cx-centre { grid-template-columns: 1fr 1fr; gap: 18px; max-width: 520px; }
  .cx-centre > .cx-boite { grid-column: 1 / -1; grid-row: 1; }
  .cx-centre > .cx-rond:first-child, .cx-centre > .cx-rond:last-child { justify-self: center; }
  .cx-rond { --t: 140px; }
  .cx-mondes { display: flex; flex-wrap: wrap; justify-content: center; }
  .cx-monde { flex: 0 1 calc((100% - 28px) / 3); }
  .cx-visuel { width: 110px; }
}
@media (max-width: 560px) {
  .cx-carte { padding: 18px 16px; }
  .cx-onglets a { padding: 8px 14px 13px; font-size: .95rem; }
  .cx-mascotte .cx-tete { width: 54px; height: 54px; }
  .cx-mascotte .bulle { font-size: .85rem; }
  .cx-rond { --t: 128px; padding: 10px; }
  .cx-rond-decouvrir small { display: none; }
  .cx-mondes { gap: 12px; }
  .cx-monde { flex-basis: calc((100% - 12px) / 2); }
  .cx-visuel { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-rond, .cx-monde a, .cx-visuel .heros, .cx-mascotte img, .cx-mascotte .bulle { transition: none; }
}