/**
 * Theme Name:     Twenty Twenty-Two Child
 * Author:         the WordPress team
 * Template:       twentytwentytwo
 * Text Domain:	   twenty-twenty-two-child
 * Description:    Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
 */
@font-face {
    font-family: 'opendyslexic';
    src: url('https://accessdoc.fr/wp-content/themes/twenty-twenty-two-child/fonts/OpenDyslexic-Regular.woff') format('woff');
  }
@font-face {
      font-family: 'luciole';
      src: url('https://accessdoc.fr/wp-content/themes/twenty-twenty-two-child/fonts/Luciole-Regular.ttf') format('ttf')
          
    }
.page-template-page-blind .document{
max-width:1100px;
padding:3rem;
font-size: 16pt !important;
}
.page-template-page-blind ed11y-element-panel, .page-template-page-blind ed11y-element-result{
display:none;
}
/* Empêcher tout annonce non désirée */
#main-content {
    aria-live: off;
}

/* S'assurer que la modale contrôle les annonces */
#choice-modal {
    aria-live: polite;
}
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

      #editSelectionBtn {
      margin-top: 10px;
      padding: 8px 15px;
      background: #0078d7;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    /* Styles modale */
    #selectionModalCanvas {
      display:none;
      position:fixed;
      top:0; left:0;
      width:100vw; height:100vh;
      background: rgba(0,0,0,0.6);
      z-index:10000;
      align-items:center;
      justify-content:center;
    }
  #modalContentCanvas {
  display: flex;
  gap: 20px;
  padding: 15px;
  border-radius: 8px;
  position: relative;

  /* Limite la hauteur pour ne pas déborder de la modale */
  max-height: 90vh;       /* déjà présent, à garder */
  overflow: hidden;       /* empêche débordement externe */
  flex-direction: row;
  background: white;
}
    #leftSide {
      flex: 1;
      position: relative;
overflow: auto;         /* ajoute scrollbar si contenu dépasse */
  max-height: 90vh;       /* limite hauteur */
    }
    #modalCanvas {
      border: 1px solid #ccc;
      max-width: 100%;
      height: auto;
      user-select: none;
    }
    #rightSide {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
overflow: auto;         /* ajoute scrollbar si contenu dépasse */
  max-height: 90vh;       /* limite hauteur */
  justify-content: flex-start;  /* ou space-between selon besoin */
  max-height: 90vh;
    }
    #previewCanvas {
   max-height: 40vh;  /* ou autre valeur selon place dispo */
  width: 100%;
  border: 1px solid #ccc;
  object-fit: contain;
  margin-bottom: 10px;
    }
    .point {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0078d7;
      border: 2px solid white;
      box-shadow: 0 0 5px rgba(0,0,0,0.4);
      cursor: pointer;
      transform: translate(-50%, -50%);
      user-select: none;
      touch-action: none;
    }
    #closeModalBtn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      font-size: 26px;
      cursor: pointer;
      color: #555;
    }

/* Faire en sorte que les boutons restent visibles */
#confirmCropBtn {
  margin-top: auto; /* pousse vers le bas */
}
.cac-article-link{
color:#fff;
}
.tox-tinymce-aux {
    pointer-events: auto !important; /* Réactive les clics */
    z-index: 10000 !important; /* Place au-dessus des autres éléments */
}
.tox-silver-sink{}
#headerimg{display: flex; align-items: center;}
.description{margin-left: 20px;}

       .menu {
            display: flex;
                       flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.85);
        }
.toggle-target,#hideButton,#popoverButton.toggle-target,#popoverButtonTexte.toggle-target,#menuPerso.toggle-target {
      display: none; /* invisible ET ne prend pas de place */
    }

        .menu button {
            position: relative;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        .menu button img,.menu form button img {
            display: block;
            width: 60px;
            height: 60px;
        }
.menu button img {
    transition: filter 0.3s ease; /* Transition pour un effet fluide */
}

.menu button:hover img,
.menu button:focus img,
.menu button:active img {
    filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(200deg);
}
#document-converter-form2{
}
.menu button .tooltip img {
   filter:invert(100%) sepia(0%) saturate(500%) hue-rotate(0deg);
}

        /* Base styles for tooltips */
.tooltip-container {
    position: relative;
    display: inline-block;
}
.credit-item{
    color: #000;
}
.description-info {
    position: absolute;
 top:70px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    width: 400px;
    padding: 10px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 100; /* Ensure the tooltip is above other elements */
}

.description-info[data-position="right"] {
    left: 0;
 top:70px;

}

.description-info[data-position="left"] {
    right: 0;
top:70px;
}

.tooltip-container:hover .description-info,
.tooltip-container:focus-within .description-info {
    visibility: visible;
    opacity: 1;
}
/* Infobulle pour le bouton d'exportation */
#export-open-tooltip {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
       border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Petite infobulle au survol */
#export-open-tooltip::after {
    content: 'Exporter le document';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#export-open-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1002;
}

#export-open-tooltip:hover::after,
#export-open-tooltip:hover::before,
#export-open-tooltip:focus::after,
#export-open-tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Container de la grande tooltip - toujours caché par défaut */
#export-tooltip-container {
    display: none !important;
}

/* Grande tooltip visible seulement avec la classe active */
#export-tooltip-container.active {
    display: flex !important;
}

/* Cacher l'infobulle sur mobile */
@media (max-width: 768px) {
    #export-open-tooltip::after,
    #export-open-tooltip::before {
        display: none;
    }
}

/* Styles pour le formulaire d'exportation */
.cmp-export-form {
    margin-top: 15px;
}

.cmp-select {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.cmp-select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

        .tooltip {
line-height:150% !important;
            position: absolute;
    background: #333;
    color: #fff;
display:none !important;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    pointer-events: none;
  min-width: 300px;
 top:60px;
            max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
.tooltip span{
color:#fff !important;
}
.tooltip-left {
            transform: translateX(-100%);
            left: 70px;
            right: auto;
        }
        /* Show tooltips */
        .menu button:hover .tooltip,
        .menu button:focus-within .tooltip,
        .tooltip:hover {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
display:block !important;
        }
.restevisible.active .tooltip { /* Tooltip visible si classe active ajoutée */
  display: block !important;
    visibility: visible !important;
    opacity: 1;
    pointer-events: auto !important;
}


     #envoyerRequete {
        background-color: black;
        color: white;
        border: 2px solid black;
        transition: background-color 0.3s, color 0.3s;
    }

    #envoyerRequete:hover,
    #envoyerRequete:focus {
        background-color: white;
        color: black;
    }
	 /* Changer la couleur des bordures de la popover */
    .popover {
        border: 2px solid black !important; /* Bordure noire */
        box-shadow: none !important; /* Supprime l'ombre si nécessaire */
    }

    /* Modifier la flèche de la popover pour qu'elle soit noire aussi */
    .popover{
       --bs-popover-border-color:#000;
    }
    
    .mermaid .edgeLabel {
      background-color: #f0f0f0;
      padding: 2px;
    }

    /* Styles personnalisés (à appliquer) */
    .custom-style .node rect {
      fill: #e0f7fa; /* Couleur de fond personnalisée */
      stroke: #00695c; /* Couleur de bord personnalisée */
    }
.flowchart-link {
    stroke: #0b0b0b;
    fill: none;
    stroke-width: 4 !important;
}
    .custom-style .edgeLabel {
      background-color: #ffe082; /* Couleur d'arrière-plan personnalisée pour les étiquettes */
    }
  
.offcanvas-body ul li{
padding:5px;
}
.offcanvas.offcanvas-start {
    width: 600px !important;
}
.offcanvas-body h2{
text-align:center;
        padding: 1rem;
        border-top: solid 2px;
        margin-top: 2rem;
}
.offcanvas-body h3{

        padding: 1rem;
     
        margin-top: 2rem;
}
.description{
max-width:100%;
}
.btn-primary {

    --bs-btn-bg: #f5cb42 !important;
  }
.traitement,.suggestions{

color: red;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 1rem 1rem;
  display: flex;
  gap: 0.1rem;
}

.menu > li {
  display: inline-block;
}

.btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
.math {
    display: inline-block; /* Permet au span de prendre de l'espace même vide */
    min-width: 1em; /* Largeur minimale, ici 1em pour être cohérent avec la taille de la police */
    min-height: 1em; /* Hauteur minimale, ici 1em pour être cohérent avec la taille de la police */
    padding: 2px 5px; /* Un petit espacement interne pour éviter que le texte soit trop collé aux bords */
    margin: 0;
    line-height: 1em; /* Ajuste la ligne pour être égale à la taille de la police */
    vertical-align: middle; /* Aligne verticalement au centre */
    box-sizing: border-box; /* S'assure que les bordures et les paddings ne changent pas la taille */
    
    /* Contour */
    border: 1px solid #ccc; /* Couleur de contour atténuée */
    border-radius: 4px; /* Coins arrondis pour un effet plus doux */

    /* Fond atténué */
    background-color: rgba(200, 200, 255, 0.3); /* Fond légèrement transparent */
    color: #333; /* Couleur du texte, vous pouvez ajuster pour plus de lisibilité */
}

.math[contenteditable="true"]:empty {
    color: transparent; /* Rend le texte invisible lorsqu'il est vide */
}

.math[contenteditable="true"]:empty:before {
    content: "LateX ici"; /* Texte par défaut quand la balise est vide */
    color: rgba(0, 0, 0, 0.5); /* Couleur atténuée pour le texte par défaut */
}

.math:hover {
    border-color: #007bff; /* Couleur de contour au survol */
    background-color: rgba(200, 200, 255, 0.5); /* Légère modification de la couleur du fond au survol */
}

        .preview {
            border: 2px solid #ccc;
            padding: 10px;
            min-height: 50px;
            margin-top: 20px;
            white-space: pre-wrap; /* Pour conserver le formatage du texte brut */
background:#fff;
z-index:100;
        }
#navigation{
position:sticky;
top:0;
z-index: 10;
 transition: top 0.3s ease-in-out;
  will-change: top;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#myeditablediv{
position: relative;
    max-width: 21cm;
    border: solid 2px;
    min-height: 60vh;
margin: 0 auto;
padding: 1cm;
}
#myeditablediv li::marker {
    color: #000000 !important;
  
}

 #menu-bar-container{
position:sticky;

    }
#navigation button{
margin:0.3em;
    }
 #menu-bar-container .tox-tinymce-inline {
      visibility: visible !important;
      display: flex !important;
    }
ul#menu-preview li::marker {
  color: #fff !important;
}
.tinymce-exporter{

}
#export-epub{
}
#footer{
display:none;
}
.tox-tbtn.correction-btn {
    background-image: url('https://accessdoc.fr/images/lisible.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px; /* Ajustez la largeur selon vos besoins */
    height: 32px; /* Ajustez la hauteur selon vos besoins */
}
.site-header {
    background-color: #ffffff;
    padding-bottom: 1rem;

  top: 0;
  z-index: 1000;
  background: white;
  transition: top 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.header-content {
    display: flex;
    align-items: center; /* Alignement vertical */
    justify-content: space-between; /* Répartit les éléments */
}

.site-logo img {
    width: 100px; /* Taille du logo */
    height: auto;
    margin-right: 15px; /* Espace entre le logo et le texte */
}
.site-logo{
display:flex;
}
.site-info {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le texte verticalement avec le logo */
}

.site-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.site-title a {
    text-decoration: none;
    color: #000;
}

.site-description {
    font-size: 16px;
    color: #000;
    margin: 5px 0 0;
}

.header-right-image img {
    width: 300px; /* Taille de la petite image */
    height: auto;
}
@media (max-width: 768px) {
    #menu-bar-container, #navigation{
        max-height: 30vh; /* Limite la hauteur */
        overflow-y: auto; /* Ajoute un scroll si nécessaire */
    }
}