/* Panneau de confort de lecture, Koality.
   Ce fichier contient deux choses : l'habillage du bouton et du panneau,
   puis les règles qui appliquent chaque réglage au site.
   Le thème sombre vit dans un fichier séparé, fabriqué en atelier pour chaque site. */

/* ------------------------------------------------------------------ */
/* Bouton d'ouverture                                                   */
/* ------------------------------------------------------------------ */

.kcl-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99998;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #ffffff;
  background: #1d3f57;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.kcl-launcher:hover { background: #173346; }
.kcl-launcher:focus-visible { outline: 3px solid #f0a020; outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Panneau                                                              */
/* ------------------------------------------------------------------ */

.kcl-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99999;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 2rem));
  overflow-y: auto;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #16211c;
  background: #ffffff;
  border: 1px solid #c9cfc8;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

.kcl-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid #e2e6de;
}

.kcl-panel__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #16211c;
}

.kcl-close {
  flex: none;
  display: inline-flex;
  padding: 0.4rem;
  color: #4a564e;
  background: none;
  border: 1px solid #d5dad1;
  border-radius: 7px;
  cursor: pointer;
}
.kcl-close:hover { color: #16211c; border-color: #4a564e; }

.kcl-panel__body { padding: 0.6rem 1.1rem 1.1rem; }

.kcl-group { padding: 0.9rem 0; border-bottom: 1px solid #eceee9; }
.kcl-group:last-of-type { border-bottom: none; }

.kcl-group h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #16211c;
}

.kcl-hint {
  margin: 0.45rem 0 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: #57625a;
}

.kcl-choices { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.kcl-choices button {
  font: 500 0.86rem/1.2 inherit;
  color: #16211c;
  background: #ffffff;
  border: 1px solid #cbd1c8;
  border-radius: 7px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.kcl-choices button:hover { border-color: #1d3f57; }
.kcl-choices button[aria-pressed="true"] {
  color: #ffffff;
  background: #1d3f57;
  border-color: #1d3f57;
}

.kcl-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.kcl-switch-row h3 { margin: 0; }

.kcl-switch {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  background: #ffffff;
  border: 1px solid #cbd1c8;
  border-radius: 999px;
  cursor: pointer;
}
.kcl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.2rem;
  height: 1.2rem;
  background: #dfe3dc;
  border: 1px solid #cbd1c8;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.kcl-switch[aria-checked="true"] { background: #1d3f57; border-color: #1d3f57; }
.kcl-switch[aria-checked="true"]::after {
  transform: translateX(1.1rem);
  background: #ffffff;
  border-color: #1d3f57;
}

.kcl-reset {
  width: 100%;
  margin-top: 0.9rem;
  font: 600 0.87rem/1.2 inherit;
  color: #4a564e;
  background: none;
  border: 1px dashed #cbd1c8;
  border-radius: 7px;
  padding: 0.6rem;
  cursor: pointer;
}
.kcl-reset:hover { color: #16211c; border-color: #4a564e; }

.kcl-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #57625a;
}

.kcl-panel :focus-visible,
.kcl-launcher:focus-visible { outline: 3px solid #b5541a; outline-offset: 2px; }

/* Le panneau prend ses couleurs sombres quand la page passe en sombre. Quelqu'un
   qui choisit les couleurs sombres le fait souvent parce que la lumière le gêne :
   lui laisser un panneau blanc de la hauteur de l'écran irait contre le réglage
   qu'il vient de demander. Les valeurs sont écrites ici, pas calculées en atelier,
   donc le panneau garde le même aspect sur tous les sites. */

html[data-confort-theme="sombre"] .kcl-launcher {
  color: #14181c;
  background: #9cc4e4;
  border-color: #14181c;
}
html[data-confort-theme="sombre"] .kcl-launcher:hover { background: #b3d4ee; }

html[data-confort-theme="sombre"] .kcl-panel {
  color: #e8e6e3;
  background: #22252a;
  border-color: #454b52;
}
html[data-confort-theme="sombre"] .kcl-panel__head { border-bottom-color: #383d43; }
html[data-confort-theme="sombre"] .kcl-panel__head h2,
html[data-confort-theme="sombre"] .kcl-group h3 { color: #f0eeeb; }
html[data-confort-theme="sombre"] .kcl-group { border-bottom-color: #33383e; }
html[data-confort-theme="sombre"] .kcl-hint,
html[data-confort-theme="sombre"] .kcl-note { color: #b0b6b2; }

html[data-confort-theme="sombre"] .kcl-close {
  color: #cfd4d0;
  border-color: #4d545b;
}
html[data-confort-theme="sombre"] .kcl-close:hover { color: #ffffff; border-color: #8f979e; }

html[data-confort-theme="sombre"] .kcl-choices button {
  color: #e8e6e3;
  background: #2b2f35;
  border-color: #4d545b;
}
html[data-confort-theme="sombre"] .kcl-choices button:hover { border-color: #9cc4e4; }
html[data-confort-theme="sombre"] .kcl-choices button[aria-pressed="true"] {
  color: #14181c;
  background: #9cc4e4;
  border-color: #9cc4e4;
}

html[data-confort-theme="sombre"] .kcl-switch {
  background: #2b2f35;
  border-color: #4d545b;
}
html[data-confort-theme="sombre"] .kcl-switch::after {
  background: #6c747b;
  border-color: #4d545b;
}
html[data-confort-theme="sombre"] .kcl-switch[aria-checked="true"] {
  background: #9cc4e4;
  border-color: #9cc4e4;
}
html[data-confort-theme="sombre"] .kcl-switch[aria-checked="true"]::after {
  background: #14181c;
  border-color: #14181c;
}

html[data-confort-theme="sombre"] .kcl-reset {
  color: #cfd4d0;
  border-color: #4d545b;
}
html[data-confort-theme="sombre"] .kcl-reset:hover { color: #ffffff; border-color: #9cc4e4; }

html[data-confort-theme="sombre"] .kcl-panel :focus-visible,
html[data-confort-theme="sombre"] .kcl-launcher:focus-visible { outline-color: #f0a020; }

/* ------------------------------------------------------------------ */
/* Réglage : taille du texte                                            */
/* ------------------------------------------------------------------ */

/* Divi écrit ses tailles en pixels, donc agrandir la taille de base du navigateur
   ne change rien. Le zoom du conteneur agrandit tout de façon proportionnelle,
   comme le zoom du navigateur, sans casser les colonnes.
   Le panneau reste hors du conteneur zoomé, donc il garde sa taille. */

html[data-confort-scale="1.15"] #page-container,
html[data-confort-scale="1.15"] .cmplz-cookiebanner { zoom: 1.15; }

html[data-confort-scale="1.3"] #page-container,
html[data-confort-scale="1.3"] .cmplz-cookiebanner { zoom: 1.3; }

html[data-confort-scale="1.5"] #page-container,
html[data-confort-scale="1.5"] .cmplz-cookiebanner { zoom: 1.5; }

/* ------------------------------------------------------------------ */
/* Réglage : espacement des lignes                                      */
/* ------------------------------------------------------------------ */

html[data-confort-spacing="confortable"] #page-container p,
html[data-confort-spacing="confortable"] #page-container li,
html[data-confort-spacing="confortable"] #page-container td,
html[data-confort-spacing="confortable"] #page-container dd {
  line-height: 1.85 !important;
  letter-spacing: 0.012em !important;
}

html[data-confort-spacing="large"] #page-container p,
html[data-confort-spacing="large"] #page-container li,
html[data-confort-spacing="large"] #page-container td,
html[data-confort-spacing="large"] #page-container dd {
  line-height: 2.2 !important;
  letter-spacing: 0.028em !important;
  word-spacing: 0.1em !important;
}

/* ------------------------------------------------------------------ */
/* Réglage : police plus facile à lire                                  */
/* ------------------------------------------------------------------ */

html[data-confort-dyslexia="on"] #page-container,
html[data-confort-dyslexia="on"] #page-container * {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
}
/* Les polices d'icônes gardent leur famille, sinon les pictogrammes deviennent des lettres. */
html[data-confort-dyslexia="on"] [class^="et-pb-icon"],
html[data-confort-dyslexia="on"] [class*=" et-pb-icon"],
html[data-confort-dyslexia="on"] .et-pb-icon,
html[data-confort-dyslexia="on"] [class^="fa-"],
html[data-confort-dyslexia="on"] [class*=" fa-"],
html[data-confort-dyslexia="on"] .dashicons,
html[data-confort-dyslexia="on"] .et_pb_button::after,
html[data-confort-dyslexia="on"] .et-menu-nav li.mega-menu > a::after {
  font-family: inherit !important;
}
html[data-confort-dyslexia="on"] .et-pb-icon,
html[data-confort-dyslexia="on"] [data-icon]::before {
  font-family: ETmodules !important;
}

/* ------------------------------------------------------------------ */
/* Réglage : souligner les liens                                        */
/* ------------------------------------------------------------------ */

html[data-confort-underline="on"] #page-container a:not(.et_pb_button):not(.kcl-launcher) {
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Réglage : boutons plus grands                                        */
/* ------------------------------------------------------------------ */

html[data-confort-tapsize="on"] #page-container .et_pb_button,
html[data-confort-tapsize="on"] #page-container button:not(.kcl-close),
html[data-confort-tapsize="on"] #page-container input[type="submit"] {
  padding: 0.85em 1.5em !important;
  min-height: 2.9em !important;
}

html[data-confort-tapsize="on"] #page-container nav a,
html[data-confort-tapsize="on"] #page-container .et_pb_text_inner a {
  display: inline-block;
  padding: 0.28em 0.2em;
  margin: -0.28em -0.2em;
}

/* ------------------------------------------------------------------ */
/* Réglage : arrêter les animations                                     */
/* ------------------------------------------------------------------ */

html[data-confort-stillness="on"] #page-container *,
html[data-confort-stillness="on"] #page-container *::before,
html[data-confort-stillness="on"] #page-container *::after {
  animation-play-state: paused !important;
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* Divi fait apparaître les modules au défilement. Sans cette règle, un module
   resté « en attente d'apparition » ne s'affiche jamais une fois les animations coupées. */
html[data-confort-stillness="on"] .et_animated,
html[data-confort-stillness="on"] .et_had_animation,
html[data-confort-stillness="on"] [class*="et-waypoint"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

@media (max-width: 30rem) {
  .kcl-launcher span { display: none; }
  .kcl-launcher { padding: 0.75rem; }
}

/* ------------------------------------------------------------------ */
/* Lecture simplifiée                                                   */
/* ------------------------------------------------------------------ */

/* Le bouton d'entrée, en haut du panneau. */
.kcl-simple-open {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: #1f5c8b;
  border: 2px solid #1f5c8b;
  border-radius: 6px;
  cursor: pointer;
}

.kcl-simple-open:hover { background: #17486d; border-color: #17486d; }

html[data-confort-theme="sombre"] .kcl-simple-open {
  color: #16191c;
  background: #9cc4e4;
  border-color: #9cc4e4;
}

html[data-confort-theme="sombre"] .kcl-simple-open:hover { background: #b3d4ee; border-color: #b3d4ee; }

/* La page de lecture simplifiée, posée par-dessus le site. */
.kcl-simple {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow-y: auto;
  background: #ffffff;
  color: #1a1a1a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-overflow-scrolling: touch;
}

.kcl-simple__bar {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: #1f5c8b;
  color: #ffffff;
}

.kcl-simple__mark {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kcl-simple__back {
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #1f5c8b;
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 6px;
  cursor: pointer;
}

.kcl-simple__back:hover { background: #e8f0f7; }

.kcl-simple__body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  font-size: 1.25rem;
  line-height: 1.9;
}

.kcl-simple__title {
  margin: 0 0 1.25rem;
  font-size: 1.7em;
  line-height: 1.3;
  color: inherit;
}

.kcl-simple__lead {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  background: #eef4f9;
  border-left: 6px solid #1f5c8b;
  border-radius: 0 6px 6px 0;
}

.kcl-simple__section { margin-bottom: 2.5rem; }

.kcl-simple__section h2,
.kcl-simple__words h2 {
  margin: 0 0 1rem;
  font-size: 1.25em;
  line-height: 1.3;
  color: inherit;
}

/* Chaque phrase occupe son propre paragraphe. La personne lit une idée,
   puis marque un arrêt avant la suivante. */
.kcl-simple__section p {
  margin: 0 0 0.9rem;
  color: inherit;
}

.kcl-simple__words {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 3px solid #d5dde4;
}

.kcl-simple__words dl { margin: 0; }
.kcl-simple__words dt { font-weight: 700; }
.kcl-simple__words dd { margin: 0 0 1.25rem; }

.kcl-simple__note {
  margin-top: 3rem;
  font-size: 0.85em;
  color: #55606a;
}

.kcl-simple :focus-visible {
  outline: 3px solid #b35c00;
  outline-offset: 2px;
}

/* La page de lecture suit les couleurs choisies dans le panneau. */
html[data-confort-theme="sombre"] .kcl-simple {
  background: #16191c;
  color: #e8e6e3;
}

html[data-confort-theme="sombre"] .kcl-simple__bar { background: #22252a; }

html[data-confort-theme="sombre"] .kcl-simple__back {
  color: #16191c;
  background: #9cc4e4;
  border-color: #9cc4e4;
}

html[data-confort-theme="sombre"] .kcl-simple__lead {
  background: #22252a;
  border-left-color: #9cc4e4;
}

html[data-confort-theme="sombre"] .kcl-simple__words { border-top-color: #3d444b; }
html[data-confort-theme="sombre"] .kcl-simple__note { color: #b0b6b2; }
html[data-confort-theme="sombre"] .kcl-simple :focus-visible { outline-color: #f0a020; }

/* La page de lecture suit aussi la taille de texte et l'espacement choisis.
   Elle vit hors de #page-container, donc le zoom appliqué à la page du site
   ne l'atteint pas. */
html[data-confort-scale="1.15"] .kcl-simple__body { font-size: 1.45rem; }
html[data-confort-scale="1.3"]  .kcl-simple__body { font-size: 1.65rem; }
html[data-confort-scale="1.5"]  .kcl-simple__body { font-size: 1.9rem; }

html[data-confort-spacing="confortable"] .kcl-simple__body { line-height: 2.1; }
html[data-confort-spacing="large"] .kcl-simple__body { line-height: 2.4; }

html[data-confort-dyslexia="on"] .kcl-simple,
html[data-confort-dyslexia="on"] .kcl-simple button {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
}

/* Le site reste en place derrière la page de lecture, sans défiler. */
html[data-confort-simple="on"] body { overflow: hidden; }

@media (max-width: 600px) {
  .kcl-simple__body { font-size: 1.15rem; padding: 1.5rem 1rem 4rem; }
}

/* Le thème du site peut poser un display sur les boutons et les blocs, ce qui
   l'emporte sur la règle [hidden] du navigateur. Les éléments cachés du panneau
   restent cachés quel que soit le thème. */
.kcl-panel[hidden],
.kcl-simple[hidden],
.kcl-group[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* La liste publique des pages en texte simplifié                       */
/* Raccourci [pages_simplifiees], voir inc/liste-publique.php.          */
/* ------------------------------------------------------------------ */

.kcl-liste-simple {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.kcl-liste-simple__item {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.kcl-liste-simple__lien {
  font-size: 1.25em;
  font-weight: 700;
  text-decoration: underline;
}

.kcl-liste-simple__resume {
  margin: 0.5rem 0 0;
  font-size: 1.05em;
  line-height: 1.7;
}

.kcl-liste-vide {
  font-size: 1.05em;
}