/* Corrections d'accessibilite et de contraste -- 20/09/2026.
   Feuille posee APRES le bloc <style> de theme genere par le builder : elle
   corrige sans modifier le gabarit, qui serait reecrit a la prochaine export.
   Chaque valeur ci-dessous a ete MESUREE au navigateur (Apache reel + .htaccess,
   24 pages, 1280 et 390 px) avant et apres. Les ratios en commentaire sont les
   mesures, pas des estimations. */

/* --- 1. Texte courant -------------------------------------------------------
   Le theme pose color:rgba(0,0,0,.5) sur #contentArea : 3,98:1 sur blanc,
   3,90:1 sur les encarts bleu pale (#E9F6FB). Sous le seuil AA de 4,5:1.
   .6 mesure 5,74:1 sur blanc et 5,58:1 sur le fond le plus clair du site.  */
.ko_Theme #contentArea,
.ko_Theme .koThemeDark #contentArea .whiteShadowContainer,
.ko_Theme #website #footerContent {
  color: rgba(0, 0, 0, .6);
}

/* --- 2. Fil d'Ariane --------------------------------------------------------
   #0006 (alpha .4) mesure a 2,85:1.                                          */
#website .breadcrumb-item {
  color: rgba(0, 0, 0, .6);
}

/* --- 3. Pied de page (fond bleu #0B63AD) ------------------------------------
   Le theme pose du blanc a 70 % (#ffffffb3) : 3,87:1 pour le texte, et les
   liens du plan de site cumulent en plus opacity:.7, d'ou 2,67:1.
   Blanc plein : 6,17:1 sur #0B63AD, 7,19:1 sur #0A599C (bandeau copyright).  */
#website .keditDark {
  color: #fff;
}
#website .keditDark a:not(.btn):not(.page-link),
#website .keditDark a.btn.btn-link {
  color: #fff;
}
#website #footerContent ul.sitemap li a,
#website .keditFooter ul.sitemap li a {
  opacity: 1;
}

/* --- 4. Indicateur de focus -------------------------------------------------
   Mesure avant correction : outline-style:none, outline-width:0px -- un clavier
   ne voyait rien. Trois obstacles mesures le 20/09/2026 :
     - bootstrap.min.css pose « .btn:focus-visible{outline:0} », plus specifique
       qu'un selecteur d'element : sans !important, aucun bouton n'a d'anneau ;
     - live.css force outline-color a currentColor et outline-offset a 0 sur les
       liens du menu ;
     - le site alterne fonds blancs et fonds bleu fonce, donc un anneau d'une
       seule couleur est invisible quelque part.
   D'ou un anneau a deux tons : un lisere blanc colle a l'element, puis l'anneau
   bleu. Sur fond clair c'est le bleu qui se voit, sur fond sombre le blanc.   */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0B63AD !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff !important;
  border-radius: 2px;
}

/* --- 5. Lien d'evitement ----------------------------------------------------
   Premier element tabulable de la page, invisible tant qu'il n'a pas le focus. */
.lienEvitement {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100000;
  background: #0B63AD;
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.lienEvitement:focus {
  left: 0;
}

/* --- 6. Logo : il etait enferme dans un <h2> vide de texte ------------------
   Le premier titre de chaque page annoncait donc une image et rien d'autre.
   Le <h2> est devenu un <span class="logoMarque"> ; on lui rend la mise en
   forme que le theme donnait au h2.                                          */
.ko_Theme .logoHolder .logoMarque,
.ko_Theme .logoHolder #logoReplacer .logoMarque {
  display: flex;
  align-items: center;
  min-height: 120px;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}
@media (max-width: 768px) {
  .ko_Theme .logoHolder .logoMarque {
    font-size: 22px;
  }
}

/* --- 6 bis. Bandeau de rubrique des articles --------------------------------
   Les 15 pages d'article ouvraient sur un <h2>Blog</h2> place AVANT le <h1> de
   l'article -- il repetait mot pour mot le fil d'Ariane juste au-dessus. Il
   devient un paragraphe ; la classe .h1 lui garde sa taille, cette regle lui
   garde la couleur que le theme donnait aux titres.                          */
#contentArea p.bandeauRubrique {
  color: var(--color1_150);
}

/* --- 7. Bandeau de consentement --------------------------------------------
   Sans JavaScript il s'affichait sans pouvoir etre ferme : il depend de jQuery.
   On le masque donc quand les scripts sont coupes -- le site n'en a pas besoin,
   puisque le seul cookie depose est justement celui qui memorise ce choix.    */
.cookie-consent a {
  color: #0a58ca;
  text-decoration: underline;
}

/* --- 8. Cases a cocher tactiles (/auto-diagnostic/) -------------------------
   Mesure avant : 13 x 13 px, moitie du minimum tactile recommande.           */
.checklist-seo-wrapper input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0 10px 0 0;
  flex: 0 0 auto;
  accent-color: #0B63AD;
  cursor: pointer;
}
.checklist-seo-wrapper label {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
}

/* Le resultat du quiz (centre et tout en gras) est corrige a la source, dans
   le <style> de /auto-diagnostic/ : cette feuille-ci est chargee avant lui. */