:root {
  --primaire: #0072ce;
}

div.access * {
  font-family: Arial, sans-serif;
}

div.access {
  box-shadow: 0 0 12px #0003;
  font-size: 16px;
  position: fixed;
  z-index: 99999999;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: 50px 1fr 70px;
  right: 0;
  border-left: 1px solid #e3e3e3;
  width: min(445px, 100%);
  background-color: #fff;
}

div.access button {
  text-align: center;
}

div.access__header {
  background-color: var(--primaire);
  position: relative;
  color: #fff;
  display: grid;
  place-items: center;
}

div.access__header button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  appearance: none;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
}

div.access__header button svg {
  width: 20px;
}

div.access__header button path {
  fill: currentColor;
}

div.access__footer {
  padding-top: 15px;
  background: #f8f9fc;
}

div.access__footer button {
  font-size: 16px;
  cursor: pointer;
  width: 80%;
  margin: auto;
  border-radius: 8px;
  height: calc(100% - 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  background-color: var(--primaire);
  color: #fff;
  border: none;
  font-weight: 700;
}

div.access__footer button svg {
  width: 20px;
}

div.access__footer button svg path {
  fill: currentColor;
}

div.access__main {
  background: #f8f9fc;
  padding: 25px 15px;
  display: grid;
  gap: 30px;
  align-content: flex-start;
  overflow: auto;
  position: relative;
}

div.access__main::-webkit-scrollbar {
  background: transparent;
  width: 4px;
}

div.access__main::-webkit-scrollbar-thumb {
  background: var(--primaire);
}

div.access__main:has(#structureHn.visible) {
  overflow: hidden;
}

div.access__main button {
  appearance: none;
  cursor: pointer;
  background: #fff;
  aspect-ratio: 133/115;
  height: auto;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 10px;
  padding: 5px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid rgb(242, 242, 248);
  box-shadow: #191b1e08 0 0 5px;
  border-radius: 8px;
}

div.access__main button svg {
  width: 20px;
  height: 20px;
}

div.access__main button path {
  fill: var(--primaire);
}

div.access__main button:hover {
  box-shadow: var(--primaire) 0 0 5px;
  color: var(--primaire);
  border-color: var(--primaire);
}

div.access__main button.active,
div.access__main button:has(.acces__step.active) {
  box-shadow: var(--primaire) 0 0 5px;
  background: var(--primaire);
  border-color: var(--primaire);
  color: #fff;
}

div.access__main button.active path,
div.access__main button:has(.acces__step.active) path {
  fill: currentColor;
}

div.access__subsection b {
  font-size: 20px;
  font-weight: 900;
  display: block;
  margin-bottom: 15px;
}

div.access__buttons {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncAccess--exergueLiens a {
  background: #000;
  color: #ff0;
  text-decoration: underline;
}

.ncAccess--cacherImages * {
  background-size: 0 0;
  background-repeat: no-repeat;
}

.ncAccess--cacherImages :is(img) {
  opacity: 0;
}

.ncAccess--dyslexicMode * {
  font-family: opendyslexic, sans-serif;
}

.ncAccess--lisibleMode * {
  font-family: Arial, Helvetica, sans-serif;
}

.ncAccess--bigCursor:hover,
.ncAccess--bigCursor * {
  cursor: url(data:image/png;base64,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), default;
}

.ncAccess--stopAnim * {
  transition-duration: 0s;
  animation-duration: 0s;
}

.ncAccess--lineHeight * {
  line-height: 1.8;
}

.ncAccess--lineHeight .access * {
  line-height: 1.1;
}

html[class] {
  background: #fff;
}

html.ncAccess--grayscale {
  filter: grayscale(1);
}

html.ncAccess--invertColor {
  filter: invert(1);
}

html.ncAccess--luminosity {
  filter: brightness(75%);
}

html.ncAccess--saturation {
  filter: saturate(75%);
}

html.ncAccess--contrast header,
html.ncAccess--contrast footer,
html.ncAccess--contrast main {
  background: #fff;
  color: #000;
}

html.ncAccess--contrast header *,
html.ncAccess--contrast footer *,
html.ncAccess--contrast main * {
  background: #fff !important;
  color: #000 !important;
  border-color: #000;
}

html.ncAccess--contrast input {
  border-width: 1px;
}

html.ncAccess--contrast svg {
  fill: #000;
}

html:has(.ncAccess--biggerText1) {
  font-size: 18px;
}

html:has(.ncAccess--biggerText2) {
  font-size: 20px;
}

html:has(.ncAccess--biggerText3) {
  font-size: 22px;
}

.access-steps {
  display: flex;
  align-items: center;
  gap: 5px;
}

.access-steps .acces__step {
  display: block;
  width: 22px;
  height: 4px;
  background: #0006;
  border-radius: 4px;
}

.access-steps .acces__step.active {
  background: #fff;
}

#ligneLecture {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  height: 5px;
  background: #000;
  z-index: 99999999;
  display: none;
}

#ligneLecture.visible {
  display: block;
}

#accessTools * {
  pointer-events: none;
}

#accessTools {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

#masqueLecture {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  height: 25lvh;
  transform: translateY(-50%);
  z-index: 99999999;
  display: none;
}

#masqueLecture:before {
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  position: absolute;
  content: "";
  background: #0009;
  pointer-events: none;
}

#masqueLecture:after {
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  position: absolute;
  content: "";
  background: #0009;
  pointer-events: none;
}

#masqueLecture.visible {
  display: block;
}

#structureHn {
  margin: 0;
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  list-style: none;
  align-content: flex-start;
  background: #fff;
  padding: 30px;
  gap: 5px;
}

#structureHn button {
  background: var(--primaire);
  aspect-ratio: unset;
  padding: 5px 10px;
  margin-bottom: 15px;
  color: #fff;
}

#structureHn.visible {
  display: grid;
}

#structureHn li.H2 {
  padding-left: 10px;
}

#structureHn li.H3 {
  padding-left: 20px;
}

#structureHn li.H4 {
  padding-left: 30px;
}

#structureHn li.H5 {
  padding-left: 40px;
}

#structureHn li.H6 {
  padding-left: 50px;
}

#structureHn span {
  display: inline-block;
  padding: 2px 5px;
  background: #3e3e3e;
  color: #fff;
}

.ncAccess--toggleInfoBulle #infoBulle {
  display: block;
}

#infoBulle {
  display: none;
  position: fixed;
  box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
  padding: 5px 10px;
  background: #fff;
  transform: translateY(-100%);
  font-size: 1.125rem;
  opacity: 1;
}

#infoBulle:empty {
  opacity: 0;
}

/* Bouton accessibilité dans le header */
.btn-accessibility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.btn-accessibility svg {
  width: 34px;
  height: 34px;
}

@font-face {
  font-family: opendyslexic;
  src: url('../fonts/OpenDyslexic-Regular.otf');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: opendyslexic;
  src: url('../fonts/OpenDyslexic-Italic.otf');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: opendyslexic;
  src: url('../fonts/OpenDyslexic-Bold.otf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: opendyslexic;
  src: url('../fonts/OpenDyslexic-Bold-Italic.otf');
  font-weight: 700;
  font-style: italic;
}
