/* Imagilire Studio — Accessibilité : ce qui se voit (lot 4.2)
 *
 * Deux choses seulement, mais deux choses que le reste des feuilles ne peut pas
 * porter : l'anneau de focus, qui doit gagner contre tous les `outline: none`
 * semés ailleurs, et le lien d'évitement, qui n'existe que pour le clavier.
 *
 * Cette feuille est chargée **en dernier** dans `index.html`, et c'est ce qui
 * lui permet de reprendre la main à égalité de spécificité.
 *
 * ## Sur les `!important` de ce fichier
 *
 * Le dépôt en compte 452, et le lot 5.4 a pour tâche de les réduire. En ajouter
 * demande donc une raison. Celle-ci : **onze règles écrivent `outline: none`
 * sur un `:focus`**, dont une en `!important` (`.ql-editor`), et toutes ont une
 * spécificité de classe. Une déclaration ordinaire perdrait contre elles, une
 * par une, à chaque fois qu'on en ajouterait une nouvelle.
 *
 * Un indicateur de focus n'est pas une préférence esthétique qu'une règle plus
 * précise peut légitimement contredire : c'est la condition pour se servir de
 * l'application sans souris. Il doit valoir contre tout ce qui est écrit
 * ailleurs, y compris ce qui sera écrit demain. Les `!important` sont donc
 * confinés aux quatre déclarations qui portent l'anneau, et à aucune autre.
 */

:root {
    /* Anneau de focus : deux couleurs, et c'est ce qui le rend visible partout.
       L'application pose ses contrôles sur trois fonds très différents — la
       barre turquoise, les panneaux blancs, les modales à dégradé. Un anneau
       d'une seule couleur disparaît sur l'un des trois. Le halo clair se voit
       sur les fonds sombres, le trait sombre sur les fonds clairs ; ensemble,
       ils se voient sur les trois. */
    --focus-ring-dark: #10242b;
    --focus-ring-light: #ffffff;
    --focus-ring-width: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   L'anneau de focus
   ───────────────────────────────────────────────────────────────────────── */

/* `:focus-visible` et non `:focus` : le navigateur ne l'applique que lorsque
   l'indicateur sert vraiment — au clavier, et dans les champs de saisie où l'on
   va taper. Un clic de souris sur un bouton n'allume rien, ce qui laisse
   l'aspect actuel de l'interface inchangé pour qui se sert d'une souris. */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-dark) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--focus-ring-light);
}

/* La surface de rédaction fait exception. `:focus-visible` reste actif sur une
   zone de saisie tant qu'on y écrit : l'anneau resterait allumé autour du
   texte pendant toute la rédaction. Son indicateur est donc son cadre — qui
   existait déjà, mais à 10 % d'opacité, autant dire invisible. Il passe à 45 %,
   et le bord devient franc. */
.ql-editor:focus,
.ql-editor:focus-visible {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(54, 177, 179, 0.45) !important;
}

/* Le champ de titre, dans la barre turquoise, n'avait aucun indicateur : son
   `outline: none` n'était même pas conditionné à `:focus`. L'anneau générique
   le couvre désormais ; ce qui suit ne fait qu'ajouter le fond qui rend la
   saisie lisible pendant qu'on écrit. */
.document-title-input:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ouvrir une modale la rend visible tout de suite
   ───────────────────────────────────────────────────────────────────────── */

/* Les cinq familles de modales sont masquées par `visibility: hidden` et
   révélées par une transition `all 0.3s`. Or `all` anime **aussi**
   `visibility` : pendant les 300 ms qui suivent l'ajout de la classe
   `active`, la modale est encore `hidden` pour le navigateur — et un
   `focus()` sur un élément invisible ne fait rien.
 *
 * C'est ce que compensaient les `setTimeout(100)` et `setTimeout(300)` semés
 * dans les gestionnaires : un pari sur la durée de la transition, qui laissait
 * la tabulation libre de sortir pendant tout ce délai. Le lot 4.2 les a
 * retirés, donc il faut traiter la cause.
 *
 * La bascule de visibilité est sortie de la transition : immédiate à
 * l'ouverture, retardée à la fermeture pour laisser le fondu se jouer
 * entièrement. C'est le patron habituel, et l'animation reste identique à
 * l'œil. */
.modal-overlay,
.document-export-modal,
.pdf-modal-overlay,
.recherche-modal-overlay,
.user-dictionary-modal-overlay {
    transition-property: opacity, visibility;
    transition-duration: 0.3s, 0s;
    transition-delay: 0s, 0.3s;
}

.modal-overlay.active,
.document-export-modal.active,
.pdf-modal-overlay.active,
.recherche-modal-overlay.active,
.user-dictionary-modal-overlay.active {
    transition-delay: 0s, 0s;
}

/* ─────────────────────────────────────────────────────────────────────────
   Les confirmations passent au-dessus de tout
   ───────────────────────────────────────────────────────────────────────── */

/* Les dialogues de `imagilire-studio-dialogs.js` empruntent le balisage des
   modales de `index.html`, et donc leur `z-index: 2000`. Or ils s'ouvrent
   souvent **par-dessus** une autre modale — « Retirer un mot » depuis le
   dictionnaire personnel, qui est à 10 000. La confirmation se retrouvait
   dessous : invisible, alors que tout le reste de la page était déjà rendu
   inerte. On ne voyait plus rien bouger, et plus rien ne répondait.
 *
 * 10 100 la place au-dessus de toutes les modales (9 999 à 10 001) sans passer
 * devant rien d'autre : c'est le dernier étage, et il n'a qu'un occupant. */
.modal-overlay.dialogue-confirmation {
    z-index: 10100;
}

/* Et les notifications passent au-dessus des dialogues.
 *
 * Le conteneur des notifications est à `z-index: 2000`, c'est-à-dire **sous**
 * toutes les modales (9 999 à 10 001). Une notification levée depuis une modale
 * était donc invisible — et elle restait pourtant annoncée par la région
 * `aria-live` du lot 4.1, ce qui donne le pire des deux : dite, jamais vue.
 *
 * Le lot 4.3 rend le défaut sérieux, puisqu'il convertit en notifications une
 * dizaine de messages qui s'affichaient depuis le dictionnaire personnel et
 * depuis les paramètres. Le conteneur n'occupe qu'un coin de l'écran et ne
 * couvre rien : le placer au-dessus ne gêne aucun clic. */
.notification-container {
    z-index: 10200;
}

/* ─────────────────────────────────────────────────────────────────────────
   Le lien d'évitement
   ───────────────────────────────────────────────────────────────────────── */

/* Premier élément focalisable de la page : une tabulation depuis la barre
   d'adresse doit le rencontrer avant les treize boutons de la barre de
   navigation. Invisible tant qu'on ne l'atteint pas au clavier — un
   utilisateur de souris n'en a pas l'usage — et posé par-dessus tout le reste
   dès qu'il reçoit le focus.
 *
 * Il est réduit à 1 px et rogné plutôt que mis en `display: none`, qui le
 * sortirait aussi du parcours clavier : un lien d'évitement inatteignable au
 * clavier ne servirait exactement à rien. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    z-index: 3000;
}

.skip-link:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin: 8px;
    padding: 12px 16px;
    background-color: var(--surface-color, #ffffff);
    color: var(--primary-color, #36B1B3);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.25));
    font-family: var(--font-family-base, inherit);
    font-weight: 600;
    text-decoration: none;
}