:root {
  --epinette: #172e5b;
  --epinette-fonce: #101e39;
  --encre: #101e39;
  --gris: #47566e;
  --papier: #f4f6fa;
  --brume: #d8dfea;
  --laiton: #adc2ff;
  --or-texte: #234dcc;
}

html { scroll-padding-top: 96px; }
:focus-visible { outline-color: #234dcc; }
.entete .cadre { min-height: 80px; }
.marque strong { font-weight: 600; }
.marque .monogramme { flex: none; }
.connexion {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: stretch;
  padding: 0;
  background: var(--papier);
}
.connexion::before { content: none; }
.campus-presentation {
  position: relative;
  display: grid;
  align-items: end;
  background: var(--epinette-fonce);
  color: white;
  isolation: isolate;
}
.connexion .fond { z-index: -2; }
.campus-presentation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #101e3966, #101e39f5);
}
.campus-intro { padding: clamp(30px, 6vw, 96px); }
.campus-intro h1 {
  max-width: 18ch;
  font-size: clamp(2.2rem, 4vw, 4.1rem);
  color: inherit;
}
.campus-intro p:not(.campus-label) { margin: 18px 0; }
.campus-intro a { color: inherit; font-weight: 700; }
.campus-label {
  color: var(--or-texte);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
.campus-intro .campus-label { color: #dce6ff; }
.connexion .carte {
  align-self: center;
  width: calc(100% - 40px);
  margin: clamp(24px, 5vw, 72px) 20px;
  padding: clamp(20px, 4vw, 42px);
}
.carte, .parcours, .contenu, .bouton { border-radius: 0; }
.bouton { background: #234dcc; }
.bouton:hover { transform: none; }
.apercu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 64px);
  padding-block: clamp(40px, 7vw, 88px);
}
.apercu h2 + p { margin-top: 14px; }
.apercu-exercice {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--brume);
  background: var(--papier);
}
.apercu-exercice textarea { resize: vertical; }
.apercu-exercice p { color: var(--gris); font-size: .9rem; }
.apercu-exercice details { border-top: 1px solid var(--brume); padding-top: 12px; }
.apercu-exercice summary { cursor: pointer; color: var(--epinette); font-weight: 700; }
.apercu-exercice blockquote { margin: 14px 0; border-left: 3px solid #234dcc; padding-left: 14px; }
.campus { background: var(--papier); }
.contenu { min-width: 0; overflow-wrap: anywhere; }
.parcours li button[aria-current="true"] { background: #edf2ff; }
.consigne header { flex-wrap: wrap; }
@media (max-width: 760px) {
  .connexion, .apercu { grid-template-columns: minmax(0, 1fr); }
  .connexion .carte { justify-self: center; }
  .qui { justify-content: end; flex-wrap: wrap; gap: 6px; }
  .attestation { padding: 26px 16px; }
}
@media print {
  .campus { background: white; }
}

.campus-presentation { overflow: hidden; }
.campus-scene {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
  border: 1px solid #adc2ff66;
  background: #adc2ff66;
}
.campus-scene li {
  padding: 12px;
  background: #101e39f2;
  font-size: .85rem;
  line-height: 1.35;
}
.campus-scene strong, .campus-scene span { display: block; }
.campus-scene span { margin-top: 4px; color: #e0e8fa; }
@media (prefers-reduced-motion: no-preference) {
  .campus-presentation .fond { animation: campus-photo 4.8s ease-out both; }
  .campus-scene li { animation: campus-etape .65s ease-out both; }
  .campus-scene li:nth-child(2) { animation-delay: .65s; }
  .campus-scene li:nth-child(3) { animation-delay: 1.3s; }
}
@keyframes campus-photo {
  from { transform: scale(1.065); }
  to { transform: scale(1); }
}
@keyframes campus-etape {
  from { opacity: .55; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
  .campus-scene { grid-template-columns: 1fr; }
  .campus-scene li { padding: 9px 12px; }
}