:root {
    --fontSize: 1.1em;
    --fontStyle: 'Roboto';
    --titleStyle: 'Merriweather';
    --maxWidth: 1200px;  /* old : 960px */
    --menuWidth: 20rem;

    --blockWarning: color-mix(in oklab, var(--blockImportant), red 90%); /* var(--blockImportant);*/
    --blockWarningLight: color-mix(in oklab, var(--blockWarning), transparent 95%);
    --blockAdvice: var(--blockFocus);
    --blockTip: color-mix(in oklab, var(--blockFocus), green 90%);  /* var(--blockFocus); */

    --blockExample: var(--blockFocus);
    --blockNote: var(--blockDiscrete);
    --blockLegal: color-mix(in oklab, var(--blockDiscrete), red 20%);
    --blockComplement: var(--blockDiscrete);
    --blockComplementLight: color-mix(in oklab, var(--blockDiscrete), transparent 95%);
}

html[data-theme='light'] {
    --contentBG: #fff;
    --contentFG:  #140589; /* #4d4d4d; */
    --contentLightBG: #f2f2f2;
    --contentLightFG: #002da8; /* #797676; */

    --headerBG: #ffffff;
    --headerFG: #002ca8; /*#4d4d4d;*/

    --titleFG: #002ca8;  /*#292929;*/

    --accentColor:#1177C0;
    --accentColorAlpha:#815f891f;
    --accentDarkColor:#074f82;
    --accentDarkFG: #fff;
    --accentLightColor: #D9EBFF;

    --borderColor: #e2e2e2;
    --borderColorAlpha: #e2e2e280;

    --menuBG: #f5f5ff;
    --menuFG: #0C76B9;

    --elmtBG: #f5f5ff;

    --blockImportant: #ff0080; /* #CF2C19; */
    --blockImportantBG: color-mix(in oklab, var(--blockImportant), transparent 95%);  /* Ajout */
  
    --blockFocus: #00aaff; /* #7CB342; */
    --blockDiscrete: #0134ff; /*#795548;*/
    --blockDiscreteBG: color-mix(in oklab, var(--blockDiscrete), transparent 95%);  /* Ajout */

    --blockTipBG: color-mix(in oklab, var(--blockTip), transparent 95%); 

    --footerBG: #90caf9; /* #fff; */
    --footerFG: #011f65; /* #4d4d4d; */

    --resultsBG: #e0f2e4;

    --schBG: #fff;
    --schFG: #000;
    --schCoef-1: #A91515;
    --schCoef-2: #936909;
    --schCoef-3: #268130;

    --scrollbar-thumb-color:#1177C0;
    --scrollbar-bgcolor:#f5f5ff;

       .typed.BlockDark.block {
        display: none;
       } 
       .typed.ParaDark {
        display: none;
       } 

    .screenSeqFra {
        background-color: #FFF;
     }
}

html[data-theme='dark'] {
    --contentBG: #292929;
    --contentFG: #d5d5d5;
    --contentLightBG: #000;
    --contentLightFG:#989898;

    --headerBG: #3b3b3b;
    --headerFG: #fff;

    --titleFG: #fff;

    --accentColor:#6fb8ec;
    --accentColorAlpha:#815f891f;
    --accentDarkColor:#074f82;
    --accentDarkFG: #000;
    --accentLightColor: #011b39;

    --borderColor: #6c6c6c;
    --borderColorAlpha: #6c6c6c80;

    --menuBG: #3b3b3b;
    --menuFG: #6fb8ec;

    --elmtBG: #4c4c4c;

    --blockImportant: #f90101; /*  #FFA389;*/
    --blockImportantBG: color-mix(in oklab, var(--blockImportant), transparent 90%);  /* Ajout */
    --blockFocus: #00aaff; /* #99d55a; */
    --blockDiscrete: #7aacd4; /* #ba8c7c; */
    --blockDiscreteBG: color-mix(in oklab, var(--blockDiscrete), transparent 90%);  /* Ajout */
    --blockTipBG: color-mix(in oklab, var(--blockTip), transparent 95%); 



    --footerBG: #3b3b3b;
    --footerFG: #fff;

    --resultsBG: #1e4827;

    --schBG: #000;
    --schFG: #fff;
    --schCoef-1: #F7726F;
    --schCoef-2: #B09B38;
    --schCoef-3: #28B336;

    --scrollbar-thumb-color:#074f82;
    --scrollbar-bgcolor:#000;
       .typed.BlockLight.block {
        display: none;
       } 
       .typed.ParaLight {
        display: none;
       }
  .screenSeqFra {
        background-color: #292929;
     }
}

.tip.block {
     background-color: var(--blockTipBG);
}

.typed.important.objectif.block{
  padding-inline-start: 10px;
  background-color: var(--blockImportantBG);
  padding-block: 0.5em;
  min-height: 16px;
  border-inline-start: 3px solid var(--blockImportant) ;
}
.typed.tache.block {
  padding-inline-start: 10px;
  background-color:  var(--blockDiscreteBG);
  padding-block: 0.5em;
  min-height: 16px;
  border-inline-start: 3px solid var(--blockDiscrete) ;
}

.txt_url_ul::after,
.txt_coLnk_ul::after,
.txt_web_ul::after{
	content:"";
}

.txt_keyboard_is::before {
  content: "";
}


.concept_ti.block_ti::before {
  font-family: "fontello";
  content: "\E97F";
  padding: 4px 10px;
}

.txt_keyboard_is {
    background: linear-gradient(to bottom, #fff, #ddd); /* Effet dégradé */
    border: 1px solid #aaa; 
    border-radius: 6px; 
    box-shadow: 0 2px 0 #aaa, 0 4px 4px rgba(0,0,0,0.2); /* Ombres pour relief */
    padding: 2px 5px 2px 2px;
    font-family: monospace;
    font-size: 0.85em;
    font-weight: bold;
    color: #333;
    text-shadow: 0 1px 0 #fff; /* Légère lumière sur le texte */
    user-select: none; /* Empêche la sélection du texte */
    margin: 0 2px;
}


.txt_textTab_is::before {
  content: "";
}

.txt_textTab_is {
    display: inline-block;
    padding: 2px 5px;
    margin-right: 4px;
    background: linear-gradient(to bottom, #fdfdfd, #dcdcdc); /* Dégradé clair */
    border: 1px solid #aaa;
    border-bottom: none; /* Pas de bordure en bas, comme un vrai onglet */
    border-radius: 6px 6px 0 0; /* Coins arrondis seulement en haut */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Effet relief */
    font-family: sans-serif;
    font-weight: bold;
    font-size: 0.85em;
    color: #333;
    position: relative;
    top: 2px; /* Pour qu’il semble “posé” sur le contenu */
}


#footer nav a:hover {
  background-color: color-mix(in oklab, var(--contentBG), transparent 85%);
  color: #0C76B9;
}