@CHARSET "UTF-8";
/* une police google */
@font-face {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light');
}

body, p, h1, h2, h3, h4, table, td, th, ul, ol, textarea, select, input {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: small;
}

body {
    /*margin: 10px 20px 10px 20px;*/
    background-color: #f4f4f4;
    color: #424242;
    /*background-image:url('');*/
    /*background-attachment:fixed;*/
}

hr {
    color: #736F6E;
}

.w-support{
    width: 60vw
}

img {
    border: 0;
}

figure {
    text-align: center;
}

#correction {
    width: 100%;
}

#support {
    width: 100%;
}

#descriptionTable > div {
    height: 100%;
}

#descriptionTable > div >  table {
    height: 100%;
}

.pMention {
    margin: 1rem 0;
    text-align: justify;
}

.liMention {
    margin-bottom: 0.5rem;
}

.ulMention {
    margin: 1rem 0;
    padding-left: 0;
}

.hMention {
    color: var(--surface-900);
    margin: 1rem 0;
}

.body .ui-messages .ui-messages-warn{
    align-items: center;
    display: flex;
}

/* Barre de progression.

   PrimeFaces 16 pose ces deux propriétés en style inline sur les éléments au
   moment du rendu : text-align: left sur le libellé, background-color:
   transparent sur la partie remplie. Un style inline l'emporte sur une feuille
   de style, d'où le !important - seul moyen de reprendre la main sans modifier
   le composant.

   Conséquence visible sans ces règles : le libellé reste aligné à gauche, et
   la barre se remplit d'une couleur transparente, ce qui donne l'impression
   qu'elle ne progresse pas alors que sa largeur augmente bien. */
.ui-progressbar .ui-progressbar-label {
    display: block;
    width: 100%;
    text-align: center !important;
    line-height: 1.5rem;
}

.ui-progressbar .ui-progressbar-value {
    background-color: var(--blue-500) !important;
}

.ui-fileupload-files {
    width: 100%;
}

.bodyMention {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--gray-100);
}

.mentionLegale {
    display: flex;
    text-align: center;
    justify-content: center;
    color: var(--surface-900)
}

.divMentionCentered {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.politiqueComMention {
    display: flex;
    justify-content: center;
    text-align: center;
    color: var(--surface-900);
    margin: 2rem 0 1rem;
}

body .ui-datatable .ui-datatable-header {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

.divMention {
    display: flex;
    height: 100%;
    overflow: auto;
    flex-direction: column;
    max-width: 80rem;
    background-color: var(--surface-0);
    padding: 1.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.contenu {
    border-radius: 10px;
    background-color: white;
    padding: 5px 0;
    position: relative;
}

a:link {
    text-decoration: none;
    color: blue
}

a:visited {
    text-decoration: none;
    color: blue
}

h1 {
    font-size: 200%;
    font-weight: normal;
    display: flex;
    justify-content: center;
    position: relative;
}

.logo {
    float: left;
    flex : auto;
    flex-direction: row;
    min-height: 90px;
}

.cines {
    align-content: center;
    height: 115px;
}



@media (max-width: 900px) {
    .logo {
        display: none;
    }
}

.vw60 {
    width: 60vw;
}

.max-w-80rem {
    max-width: 80rem;
}

.centered {
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    margin-right: 30px;
}

.titre {
    width: 100%;
    height: 117px;
    background-color: white;
    padding: 3px 3px 3px 3px;
    border-radius: 10px;
}

.bandeau_titre {
    gap: 8px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 136px;
}

.button-description {
    border: none !important;
    box-shadow: none !important;
}

.mt-80 {
    margin-top: 80px;
}

body .ui-button.ui-button-text-only .ui-button-text {
    padding: 0;
    align-content: center;
}

.form {
    /* 	margin-bottom: 15px; */
    /* 	background-color: #005849; */
    /* 	color: white; */
    padding: 1px;
}

label {
    display: flex;
    flex-direction: row;
    vertical-align: top;
    width: 100%;
    font-size: small;
}

input {
    margin: 2px 5px 2px 5px;
    /* 	border-color: grey; */
}

input:hover {
    border-color: black;
}

input:focus {
    border-color: #2c82fc;
}

.fileInput {
    border: 1px solid black;
    border-radius: 5px;
}

.red {
    color: #c83b16;
}

.blue {
    color: #0056b3;
}

.td_span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.td_dl {
    border: 1px solid;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.uploadValidation {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-bottom: 2rem;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

.upload-zone {
    min-height: 8rem;
    transition: all 0.2s;
    background-color: var(--surface-50);
}

.upload-zone:hover {
    background-color: var(--primary-50);
    border-color: var(--primary-300) !important;
}

.upload-zone .ui-fileupload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: transparent;
    border: none;
}

.ui-fileupload .ui-fileupload-buttonbar{
    justify-content: center;
}

.upload-zone .ui-fileupload-buttonbar {
    display: flex;
}

.h-1rem {
    height: 0.5rem !important;
}

.uploadValidation:hover {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08), 0 3px 4px rgba(0, 0, 0, 0.1), 0 1px 4px -1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.fileUploadValidation {
    display: flex;
    flex-direction: row;
}

.h-70{
    height: 70%;
}

.formValidation {
    align-content: center;
    flex-flow: wrap;
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}
.display-none{
    display: none;
}

.webkit-fill-available {
    width: 100% !important;
}

.max-w-full {
    max-width: 100% !important;
}

.webkit-f-h {
    height: 100% !important;
}

body .ui-messages .ui-messages-warn{
    width:100%;
}

.max-w-1080 {
    max-width: 1080px;
    align-self: center;
    width: -moz-available;
}

.ui-blue-button:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.justify-content-left {
    justify-content: left !important;
}


.webkit-fill-available-all {
    width: 100% !important;
    height: 100% !important;
}

.formCorrector {
    align-content: center;
    flex-flow: wrap;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    float: left;
}

.formulaire {
    display: flex;
    flex-direction: column;
    float: left;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1), 0 4px 5px -2px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 30px 60px 30px 60px;
    /*height: 50vh;*/
}

.ui-fluid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#formLevel2 > #messageLabel {
    width: 100%;
}

.div-form {
    gap: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px 0 7rem 0
}

.button-ticket {
    background-color: black !important;
    color: white !important;
    padding: 0.5em 0 0.5em 0 !important;
}

#mainContent {
    margin-bottom: 3.5rem;
}

.niveau2-body {
    height: 98vh;
}

.hscreen {
    height: inherit;
}

.navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.contenu {
    height: inherit;
    min-height: 98vh
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover a {
    color: #0056b3;
    transition: color 0.5s ease;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    border-color: #1b4d4e;
    opacity: 70%;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header {
    top: 0;
    border-bottom: 2px solid #dee2e6;
    flex-grow: 1;
    justify-content: center;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-color: #1b4d4e;
    flex-grow: 1;
    justify-content: center;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    color: #0056b3;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-tabs-outline {
    box-shadow: none;
}

.bandeau_titre .title-container {
    text-align: center;
}

.h-1 {
    height: 1px;
}

.mt-19 {
    margin-top: 1.9rem;
}

.mt-top {
    margin-top: 6.9rem;
}

body .ui-dialog {
    z-index: 15 !important;
}

body .ui-datatable-sticky {
    z-index: 10 !important;
    left: auto !important;
}

.titre-format-validation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.max-w-1960 {
    max-width: 1960px;
}

.max-w-1600 {
    max-width: 1600px;
    align-self: center;
    width: -moz-available;
}

.max-w-1800{
    max-width: 1800px;
    align-self: center;
    width: -moz-available;
}

.max-w-71rem {
    max-width: 71rem;
}

.max-w-75rem {
    max-width: 75rem;
}

.scale-up {
    display: flex;
    transform: scale(1.5);
    align-items: center;
    justify-content: center;
}

.gapper {
    flex-direction: column;
    display: flex;
    gap: 10px;
    width: 90vw;
}

.vw50 {
    width: 50vw;
}

.format-validation {
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#tutoriel {
    width: 100%;
    float: left;
    overflow-x: hidden;
}

#web_service {
    width: 100%;
    float: left;
    overflow-x: hidden;
}

body .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-panels {
    display: flex;
    justify-content: center;
    width: 100%;
}

.vh60 {
    height: 60vh;
}

.vh75{
    height: 75vh;
}

.vh70 {
    height: 70vh;
}

.vw80 {
    width: 80vw;
}

.vw100 {
    width: 100vw;
}

.scale-down {
    object-fit: contain;
}

.footer {
    padding: 0 5px 10px 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
}

a:hover {
    text-decoration: underline;
}

body .ui-button {
    background: #1b4d4e;
    color: #fff;
    border: 1px solid #1b4d4e;
    margin: 0;
    outline: 0 none;
    border-radius: 4px;
    transition: background-color .2s,
    color .2s, border-color .2s,
    box-shadow .2s,
    opacity .2s;
}

body .ui-button:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.console {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #CCCCCC;
    background: #000000;
    border: 3px double #CCCCCC;
    padding: 10px;
}

.xml {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    border: 1px solid #c3dbf0;
    background-color: #FFFFFF;
    padding: 6px;
    color: #0b5690;
    font-weight: bold;
    max-height: 300px;
    overflow: auto;
}

.boite_code {
    font-size: larger;
    background-color: #e6f0f9;
    border: 1px solid #bfd9ef;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 3px;
    padding: 3px;
    margin-top: 8px;
}


body .ui-dialog .ui-dialog-titlebar {
    display: flex;
    justify-content: space-between;
}

.fill-available-all {
    width: 100% !important;
    height: 100% !important;
}

.spacer {
    clear: both;
}

.contact {
    font-style: italic;
    margin: 5px 0 5px 0;
}

#validationResultTable {
    width: auto;
}

#validation {
    width : 100%;
}

#bloc_bas img {
    margin: 2px 2px 2px 2px;
}

#bloc_bas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.vw95 {
    width: 95vw;
}

.warning {
    color: red;
    font-weight: bold;
    font-size: larger;
}

.message {
    height: 20px;
    background-color: #04B45F;
    color: black;
    padding: 5px 5px 2px 2px;
    margin: 10px 0 0 0;
}

.message-ras {
    background-color: #c1cd00;
    padding: 5px 5px 2px 2px;
    margin: 10px 0 0 0;
}

.message-ERROR {
    color: red;
    font-weight: bold;
    display: flex;
    padding: 5px 5px 2px 2px;
    margin: 0;

}

.message-DEFAULT {
    display: flex;
    background-color: #04B45F;
    padding: 5px 5px 2px 2px;
    margin: 10px 0 0 0;
    color: black;
}

table.format td {
    background-color: #FFF;
}

table.format {
    border-collapse: collapse;
    border: none;
}

table.format th, table.format td {
    padding: 5px;
    border: thin solid #888;
}

table.format th {
    border-bottom: 2px solid #333;
    text-align: left;
    background-color: #f0f0f0;
}

.latex sub, .latex sup {
    text-transform: uppercase;
}

.latex sub, .latex {
    margin-left: -0.1667em;
    margin-right: -0.125em;
    font-size: 1em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
    display: table-cell;
}

.ui-datatable-tablewrapper {
    max-width: 120rem;
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

#dataResult > .ui-datatable-tablewrapper {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

.pt-12 {
    padding-top : 8rem;
}

select {
    transition: all 0.2s;
    min-width: 12rem;
}

select:hover {
    border-color: var(--primary-color);
}

select option {
    padding: 0.5rem;
    background-color: var(--surface-card);
}

select option:hover, select option:focus {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
}

.ball {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #f00;
    opacity: 75%;
    display: block;
}

#j_idt5 > .ui-datatable-tablewrapper {
    height: 100%;
}

#j_idt5 > .ui-datatable-tablewrapper > table {
    height: 100%;
}

#contactText p {
    display: flex;
}


.ow-break-word {
    overflow-wrap: break-word;
}

.ui-dialog-title {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-align: left;
}

body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    list-style: none;
    white-space: nowrap;
    vertical-align: top;
    float: none;
    padding: 1rem;
    background: #fff;
    color: #6c757d;
    margin: 0;
    cursor: pointer;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.w-unset {
    width: unset !important;
}

.py-8px {
    padding-top: 8px;
    padding-bottom: 8px;
}

.bg-white {
    background-color: #fff;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
}

@media (max-width: 725px) {
    body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
        padding: 0.5rem 0.5rem 1rem 0.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 590px) {
    body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
        padding: 0.5rem 0.5rem 1rem 0.5rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 640px) {
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        padding: 1.1rem 0.5rem;
        min-width: 30%;
        display: flex;
        margin: -.4em 1em -.4em -.4em;
        background: #f8f9fa;
    }

    .sm\:tdpy-0{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    sm\:vw80{
        width: 80vw;
    }

    .sm\:w-support{
        width: 100%;
    }

    .sm\:tdpy-0 span {
        margin-right: 0 !important;
    }

    #commentP {
        padding: 1rem 0.5rem 1rem 0.8rem !important;
        margin: 0 !important;
        width: 100%;
    }

    .sm\:bg-greyheader{
        background-color: #f8f9fa;
    }

    .sm\:tddivp{
        padding: 0.8rem 0;
    }

    .desktop-header {
        display: none;
    }

    .mobile-header {
        display: inline;
    }

    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        display: flex;
        align-items: center;
        padding: 4px 0 4px 5px;
    }

    #contactText p{
        display: none;
    }

    body .ui-fileupload .ui-fileupload-buttonbar .ui-button {
        margin-right: 0;
    }

    .ui-fileupload-buttonbar .ui-button {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    body {
        margin: 0;
    }

}

@media (max-width: 576px) {
    .sm\:25vw {
        width: 25vw;
    }
}

@media screen and (min-width: 576px) {
    .sm\:w-fill-available {
        width: 100% !important;
    }

    sm\:py-8px {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    sm\:py-unset {
        padding-top: unset;
        padding-bottom: unset;
    }

    sm\:w-unset {
        width: unset !important;
    }

    sm\:font-italic {
        font-style: italic;
    }

}

@media screen and (min-width: 768px) {
    .md\:pt-12 {
        padding-top: 8rem !important;
    }
}

@media screen and (min-width: 992px) {
    .lg\:pt-12 {
        padding-top: 8rem !important;
    }
}

@media (max-width: 1300px) {
    .logo {
        min-height: 60px;
    }
}

/* Barre de progression indéterminée animée */
.animated-indeterminate {
    background: linear-gradient(90deg, #e0e0e0 25%, #bdbdbd 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: indeterminateBarMove 1.2s linear infinite;
}
@keyframes indeterminateBarMove {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Correction pour le RGAA - classe sr-only (Screen Reader Only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------------
   Palette PrimeFlex

   PrimeFlex 3.x n'écrit pas de couleur en dur : ses utilitaires renvoient à
   des variables CSS (.bg-blue-700 { background-color: var(--blue-700) }) que
   fournissait le thème PrimeFaces. Les thèmes de PrimeFaces 16 sont passés
   aux jetons PrimeUIX et ne définissent plus ces noms. Une variable absente
   n'émet aucune erreur : la déclaration est ignorée, le fond disparaît.

   On redéclare donc ici les seules teintes utilisées par l'application. Les
   valeurs reprennent la palette PrimeFlex 3.3.1 d'origine.
   ------------------------------------------------------------------------ */
:root {
    --blue-300: #7dd3fc;
    --blue-500: #0ea5e9;
    --blue-700: #0369a1;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --orange-300: #fdba74;
    --orange-500: #f97316;
    --orange-700: #c2410c;
    --gray-300: #ececec;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --green-300: #86efac;
    --green-500: #22c55e;
    --green-700: #15803d;
    --pink-300: #f9a8d4;
    --pink-500: #ec4899;
    --pink-700: #be185d;
    --yellow-300: #fde68a;
    --yellow-500: #f59e0b;
    --yellow-700: #b45309;
}

/* ------------------------------------------------------------------------
   Dialogues du Dialog Framework (mentions légales, descriptions de formats).
   Le contenu est une page chargée dans une iframe : une seule zone doit
   défiler, celle de la page intérieure, et rien ne doit déborder.
   ------------------------------------------------------------------------ */

/* Le dialogue : pas de marge intérieure ni de défilement propre. */
.facile-dialog .ui-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

/* L'iframe remplit exactement le contenu du dialogue. */
.dialog-iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* La page chargée dans l'iframe : légèrement plus petite que la fenêtre de
   l'iframe (97vh / 99vw) pour ne jamais la dépasser. */
html.dialog-page {
    overflow: hidden;
}

body.dialog-page {
    margin: 0;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;
    overflow: auto;
}

/* Page centrée en flex (mentions légales) : « safe center » centre le contenu
   quand il tient dans le cadre, et l'aligne en haut quand il déborde. Un simple
   « center » faisait déborder le texte à parts égales en haut et en bas : le début
   (jusqu'à la section 7) restait au-dessus de la zone de défilement, inaccessible.
   La première déclaration sert de repli aux navigateurs qui ignorent « safe ». */
body.dialog-page.bodyMention {
    justify-content: flex-start;
    align-items: flex-start;
    align-items: safe center;
    padding: 1rem 0;
}

/* Fiche de format : contenu court, aucun défilement. */
body.dialog-page-fixe {
    overflow: hidden;
}

/* ------------------------------------------------------------------------
   Blocs de code (page Web Service, aide TEI).
   Prism impose « white-space: pre » aux éléments language-* : les longues
   lignes ne revenaient plus à la ligne. Et un élément flex a par défaut
   min-width:auto, donc il refuse de rétrécir sous la largeur de son contenu
   et déborde de la page. D'où ces deux réglages.
   ------------------------------------------------------------------------ */
.boite_code {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.boite_code pre,
.boite_code pre[class*="language-"] {
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

/* Retour à la ligne plutôt que défilement horizontal : plus lisible sur
   petit écran, et le bloc ne dépasse jamais. La coloration Prism est
   conservée. */
.boite_code code[class*="language-"],
.boite_code pre[class*="language-"] {
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Prism découpe le code en <span> colorés. Si le pre ou le code est un conteneur
   flex, chaque span devient une colonne et le code s'affiche caractère par
   caractère. Ces éléments restent donc des blocs, quelles que soient les classes
   utilitaires posées dans les vues. */
.boite_code pre,
.boite_code code {
    display: block !important;
}

/* Lien de retour en tête des pages d'aide (TEI, PDF). Discret, mais visible
   au clavier : le focus est explicitement marqué. */
.lienRetour {
    display: inline-block;
    margin-bottom: 1rem;
    color: #0056b3;
    text-decoration: none;
    font-size: 0.95rem;
}

.lienRetour:hover,
.lienRetour:focus-visible {
    text-decoration: underline;
}

.lienRetour:focus-visible {
    outline: 3px solid #6edcc3;
    outline-offset: 2px;
}