/* Les quatre `@import` de polices qui ouvraient ce fichier sont passés en
   `<link>` dans index.html (Lot 8, tâche 4). Un `@import` ne se découvre qu'une
   fois la feuille **téléchargée et analysée** : le navigateur enchaînait
   index.html → styles.css → andika.css → andika-400.ttf, quatre allers-retours
   en file indienne pour la police du corps de texte. Les `<link>` partent tous
   ensemble avec styles.css, et `<link rel="preload">` lance la police au
   premier octet du document. Mesuré : la police arrivait au bout de trois
   requêtes sérialisées, elle part désormais avec la première.
   Les quatre fichiers sont déjà dans `URLS_COQUILLE` (service-worker.js) — ils
   y figuraient justement parce qu'ils n'avaient pas de `<link>` à eux. */

:root {
    --primary-color: #36B1B3;
    --secondary-color: #F7B731;
    --text-color: #333;
    --background-color: #FEFCF9;
    --page-color: #fff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --font-size-small: 16px;
    --font-size-medium: 20px;
    --font-size-large: 24px;
    --font-size-xlarge: 28px;
    --line-height: 1.6;      /* valeur de base */
  --letter-spacing: 0em;   /* valeur de base */
}

/* === Thèmes doux === */
body.theme-sepia{
    --background-color:#F5ECD9;   /* beige papier */
    --page-color:#FBF6ED;         /* page un ton plus clair */
    --text-color:#3E2C14;         /* brun foncé */
  }
  
  body.theme-cream{
    --background-color:#FEFBEF;   /* ivoire */
    --page-color:#FFFFFF;
    --text-color:#333;            /* gris anthracite */
  }
  
  body.theme-pastelBlue{
    --background-color:#EAF4FD;   /* bleu très pâle */
    --page-color:#FFFFFF;
    --text-color:#203040;         /* bleu ardoise */
  }

/* -------------------- HAUT CONTRASTE -------------------- */
body.high-contrast {
    --primary-color: #000;      /* noir pur */
    --secondary-color: #FFD400; /* jaune vif */
    --background-color: #000;   /* fond noir */
    --page-color: #000;
    --text-color: #FFF;         /* texte blanc */
    --shadow-color: rgba(255,255,255,0.15);
    
}

body.high-contrast .section-title {
    color: var(--text-color);
}

body.high-contrast .book-cover img,
body.high-contrast .page { box-shadow:none; } /* évite halos gris */

body.high-contrast :focus {
    outline: 3px solid #FFD400 !important;
    outline-offset: 2px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* `touch-action: manipulation` était posé sur `*` — donc aussi sur le texte
   des histoires, les illustrations et les pages du livre. Or il désactive le
   **zoom par double-tape** : c'était, avec `user-scalable=no` retiré du
   viewport au Lot 7 (tâche 4), le second verrou sur l'agrandissement, et le
   moins visible des deux. Le retirer de partout aurait toutefois un coût
   réel : un enfant qui appuie deux fois de suite sur « page suivante »
   déclencherait un zoom au lieu de tourner la page.

   D'où le partage : la propriété reste sur ce qui se **tape**, et disparaît de
   ce qui se **lit**. Double-taper le texte l'agrandit ; double-taper un bouton
   ne fait que l'actionner deux fois. Les champs de saisie en sont exclus à
   dessein — le double-tape y sélectionne un mot, comportement natif qu'il n'y
   a aucune raison de retirer. */
button,
a,
.book-cover,
.settings-icon,
[role="button"] {
    touch-action: manipulation;
}

/* ── Utilitaire d'accessibilité ──────────────────────────────────────────
   Texte destiné aux seuls lecteurs d'écran : hors de l'écran mais dans
   l'arbre d'accessibilité. `display: none` ou `visibility: hidden` le
   retireraient des deux à la fois, ce qui est exactement ce qu'on ne veut pas.

   Elle vivait dans css/imagilire-mini-parental-protection.css, où deux
   `<label>` de cette modale l'utilisaient. Le Lot 7 (tâche 3) en a besoin pour
   la région d'annonce du livre : une classe utilitaire rangée dans la feuille
   d'une modale aurait fait dépendre le livre du chargement de celle-ci. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Variantes WebP — Lot 8, tâche 1.
   Chaque illustration est enveloppée dans une `<picture>` qui propose d'abord
   son `.webp`. `display: contents` fait disparaître la boîte de l'enveloppe :
   l'`<img>` redevient l'enfant direct de son conteneur, et les quelque vingt
   règles écrites avant cette tâche — `.book-cover img { height: 70% }`,
   `.page-image { max-height: 100% }`, la mascotte en `flex` — continuent de
   s'appliquer **sans une retouche**. C'est la seule raison de cette ligne :
   sans elle, il aurait fallu doubler chaque sélecteur d'une variante
   `picture`, et ce lot en aurait passé plus à réparer la mise en page qu'à
   alléger les images. */
picture {
    display: contents;
}

body {
    font-family: 'Andika', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* SÉLECTION DE NIVEAU */
.level-selector {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    background-color: var(--primary-color);
    border-radius: 50px;
    padding: 5px 10px;
    display: flex;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.level-btn {
    border: none;
    background: transparent;
    color: white;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-btn.active {
    background-color: white;
    color: var(--primary-color);
}

.level-btn[data-level="petite"] {
    font-size: 14px;
}

.level-btn[data-level="moyenne"] {
    font-size: 16px;
}

.level-btn[data-level="grande"] {
    font-size: 18px;
}

.level-btn[data-level="très grande"] {
    font-size: 20px;
}

/* BIBLIOTHÈQUE */
.library {
    padding: 20px;
    display: none; /* Initialement caché */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    overflow-y: auto;
    max-height: 100vh;
}

/* `.story-section`, `.section-header` et `.section-title` étaient définis ici
   **et** plus bas dans ce même fichier. Les deux jeux ont été fusionnés au
   second emplacement, après `.favorites-section` — chercher « Sections
   d'histoires — les quatre règles fusionnées ». Lot 8, tâche 5. */

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.book-cover {
    position: relative;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s;
    cursor: pointer;
    background-color: var(--page-color);
    display: flex;
    flex-direction: column;
}

.book-cover:hover {
    transform: translateY(-5px);
}

.book-cover img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* `<button>` depuis le Lot 7, tâche 1 : le bandeau de titre est le point
   d'entrée au clavier de la bibliothèque (js/library/covers.js). Les quatre
   propriétés de remise à zéro le rendent indiscernable du `<div>` d'avant —
   `font-family` et `font-size` surtout, qu'un bouton ne reçoit pas par
   héritage. La taille reste **déclarée ici**, et non dans la feuille du
   clavier : la règle responsive qui la porte à 14 px vit dans ce fichier, plus
   bas, et une redéclaration venue d'une feuille chargée après l'emporterait
   sur elle quelle que soit la largeur d'écran. */
.book-title {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    padding: 10px;
    text-align: center;
    font-weight: bold;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
}

.book-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
}

.delete-btn {
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background-color: rgba(255, 0, 0, 1);
}

.edit-image-btn {
    background-color: rgba(0, 123, 255, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 5px;
}

.edit-image-btn:hover {
    background-color: rgba(0, 123, 255, 1);
}

/* Filtrage */
.filter-container {
    margin: 0 0 15px;
  }
  .filter-label {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--text-color);
  }
  #genreFilter {
    width: 100%;
    max-width: 200px;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

/* Styles pour la section des favoris */
.favorites-section {
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    background-color: rgba(247, 183, 49, 0.1);
}

.favorites-section .section-title {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.favorites-section .section-title i {
    color: #FFD700;
}

/* Styles pour les boutons de genre */
.genre-filter-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color);
}

.genre-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.genre-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.genre-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.genre-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 8px rgba(54, 177, 179, 0.3);
}

.genre-btn i {
    font-size: 12px;
}

@media (max-width: 768px) {
    .genre-buttons {
        gap: 6px;
    }
    
    .genre-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .genre-btn i {
        font-size: 10px;
    }
}  

/* ─── Bouton filtre mot-clé avec image de fond ───────────────────────────── */

/* Base : le bouton keyword a besoin d'une position relative pour l'overlay édition */
.keyword-filter-btn {
    position: relative;
    overflow: hidden;
}

/* Quand une image de fond est définie */
.keyword-filter-btn.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: transparent;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    min-width: 90px;
}

/* Voile semi-transparent pour garantir la lisibilité du texte */
.keyword-filter-btn.has-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    border-radius: inherit;
    z-index: 0;
    transition: background 0.2s ease;
}

.keyword-filter-btn.has-bg-image:hover::before {
    background: rgba(0, 0, 0, 0.22);
}

.keyword-filter-btn.has-bg-image.active::before {
    background: rgba(0, 0, 0, 0.18);
}

/* Texte et icône au-dessus du voile */
.keyword-filter-btn.has-bg-image i,
.keyword-filter-btn.has-bg-image span {
    position: relative;
    z-index: 1;
}

/* ─── Overlay édition (crayon) sur les boutons keyword en mode édition ───── */

/* Bouton crayon — caché par défaut */
.kw-edit-overlay-btn {
    display: none;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary-color, #f7b731);
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.15s ease;
    pointer-events: all;
}

.kw-edit-overlay-btn:hover {
    transform: scale(1.2);
    background: var(--primary-color);
}

/* Visible uniquement en mode édition (quand edition-disabled N'est PAS sur body) */
body:not(.edition-disabled) .keyword-filter-btn .kw-edit-overlay-btn {
    display: flex;
}

/* ─── Modale éditeur de mot-clé ─────────────────────────────────────────── */

.edit-keyword-container {
    max-width: 520px;
}

.edit-keyword-container h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bouton "Supprimer l'image de fond" */
.remove-bg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 12px;
    border: 1.5px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.remove-bg-btn:hover {
    background: #e74c3c;
    color: white;
}

/* Actions de la modale keyword : bouton Supprimer à gauche, Annuler/Enregistrer à droite */
.keyword-editor-actions {
    justify-content: space-between;
    align-items: center;
}

.form-actions-right {
    display: flex;
    gap: 10px;
}

/* Bouton Supprimer (rouge discret) */
.delete-kw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.delete-kw-btn:hover {
    background: #e74c3c;
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────────── */

   /* Styles pour l'indicateur de chargement */
   .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.2rem;
    color: var(--primary-color);
}

.loading-spinner i {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Bouton d'ajout d'histoire */
.add-story-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, background-color 0.3s;
}

.add-story-btn:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Icône d'information et infobulle.

   ── Ce que ce bloc ne dit plus ──────────────────────────────────────────────
   Un second jeu de règles, plus bas dans ce fichier (« Infobulles »), redéfinit
   `.info-icon`, `.info-tooltip`, `.info-tooltip h3` et `.info-tooltip p` avec
   les **mêmes sélecteurs**. À sélecteur identique, la dernière déclaration
   gagne, quoi qu'il y ait entre les deux : toute propriété écrite ici **et**
   là-bas n'avait donc aucun effet. Neuf déclarations dans ce seul bloc.

   Elles sont retirées (Lot 8, tâche 5) plutôt que les deux jeux ne soient
   rapprochés : entre eux s'intercalent `.custom-stories-info`,
   `.custom-stories-tooltip` et `.new-stories-tooltip`, qui portent sur les
   mêmes éléments, les mêmes propriétés et la même spécificité. Déplacer une
   règle d'un côté ou de l'autre change ce qui s'affiche ; vider une règle de
   ce qui ne s'appliquait pas ne change rien, et c'est démontrable.

   Ce qui reste ici est donc exactement ce qui agit encore : la position de
   l'infobulle, sa flèche, son animation, la taille et l'opacité de l'icône.

   > Reste à trancher, et ce n'est pas un dédoublonnage : l'infobulle reçoit
   > `bottom: 30px` d'ici **et** `top: 100%` de là-bas, ce qui l'étire entre
   > les deux. Décider de quoi elle doit avoir l'air est une décision
   > d'interface. Signalée au plan, Lot 8. */
.info-icon {
    /* `margin-left`, `cursor` et `position` étaient réécrits plus bas. */
    font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.info-icon:hover {
    opacity: 1;
}

/* Style spécifique pour l'icône d'information des histoires personnalisées */
.custom-stories-info {
    font-size: 0.7em;
    vertical-align: super;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}

.info-tooltip {
    /* `display`, `position`, `background-color`, `color`, `border-radius`,
       `padding`, `box-shadow`, `width` et `z-index` étaient réécrits plus bas :
       les valeurs servies sont `border-radius: 5px`, `padding: 1rem`,
       `box-shadow: 0 2px 10px rgba(0,0,0,.1)` et `z-index: 1000`. */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    text-align: left;
    animation: fadeIn 0.3s;
}

/* Style spécifique pour l'infobulle des histoires personnalisées */
.custom-stories-tooltip {
    bottom: auto;
    top: 20px;
    z-index: 100;
    position: absolute;
    left: -150px;
    transform: none;
    width: 300px;
}

/* Style spécifique pour l'infobulle des nouvelles histoires */
.new-stories-tooltip {
    bottom: auto;
    top: 30px;
    left: 0;
    transform: translateX(-50%);
    z-index: 100;
}

.info-tooltip h3 {
    /* `margin-top`, `color` et `font-size` étaient réécrits plus bas : le titre
       d'une infobulle est bleu `#007bff` et de 1,2 rem, jamais turquoise. */
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.info-tooltip p {
    /* `font-size` était réécrit plus bas, à 0,9 rem. */
    line-height: 1.4;
    margin: 8px 0;
}

.info-tooltip:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent transparent;
}

/* Flèche spécifique pour l'infobulle des nouvelles histoires */
.new-stories-tooltip:after {
    bottom: auto;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px;
    border-color: transparent transparent white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeInTop {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* `.info-tooltip.active { display: block }` était écrit ici **et** plus bas,
   à l'identique. Une seule des deux servait ; celle qui reste est la seconde.
   Lot 8, tâche 5. */

/* Animation spécifique pour l'infobulle des nouvelles histoires */
.new-stories-tooltip {
    animation: fadeInTop 0.3s;
}

/* Formulaire d'ajout d'histoire */
/* Style de base pour les fenêtres modales (pour l’ajout d’histoire et la modification d’image) */
/* ────────────────────────────────────────────────────────────────────────────
   CONTRAT D'AFFICHAGE — une seule bascule : la classe `.active`.
   `display: flex` sert uniquement à centrer le contenu et reste constant ; la
   visibilité est portée par `opacity` / `visibility` / `transform`, pour
   bénéficier de la transition de 0,3 s.
   Le JS ne doit donc JAMAIS écrire `style.display` sur ces éléments : une
   règle en ligne primerait sur cette feuille et figerait la modale (invisible
   mais présente, ou visible sans transition). Voir les fonctions
   showXxxForm / hideXxxForm d'imagilire-mini-main.js, seul propriétaire de
   ces modales.
   ──────────────────────────────────────────────────────────────────────────── */
.add-story-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;              /* Utilisé pour centrer le contenu */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    
    /* Initialement caché : on rend la modale invisible via opacity et visibility */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);      /* Légère réduction pour créer l’effet zoom */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 2100;              /* Au-dessus de la modale du dictionnaire (z-index: 2001) */
}

/* Classe active qui rend la modale visible */
.add-story-form.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);        /* Retour à 100 % */

    /* `visibility 0s` à l'ouverture seulement (Lot 7, tâche 2). La règle de
       base transitionne `visibility` sur 0,3 s dans les **deux** sens : à la
       fermeture c'est ce qu'on veut — la boîte reste visible le temps du fondu
       — mais à l'ouverture cela la laissait `hidden` pendant deux frames, soit
       22 ms mesurées. Le navigateur refuse le focus sur un élément non rendu,
       en silence : la modale s'ouvrait donc sans focus, et le
       `requestAnimationFrame` que la modale de création portait pour s'en
       sortir ne suffisait pas — une seule frame, il en fallait deux. La
       fermeture garde sa transition, elle vient de la règle de base. */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.apply-all-pages {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #ddd;
    border-radius: 5px;
  }
  .apply-all-pages label {
    cursor: pointer;
  }

.form-container {
    background-color: var(--page-color);
    border-radius: 10px;
    padding: 30px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.form-container h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
}

/* --- Profile Import Modal items --- */
.profile-import-item {
    border: 2px solid var(--border-color, #ddd);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-import-item:hover {
    border-color: var(--primary-color);
}

.profile-import-item.checked {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 15%, transparent) inset;
}

.profile-import-item-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.profile-import-item .profile-import-text {
    font-weight: 600;
}

.profile-import-item .profile-import-text small {
    font-weight: normal;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Andika', sans-serif;
    font-size: 16px;
}

.form-group textarea {
    resize: vertical;
    min-height: 200px;
}

/* ─── Chips de suggestion de mot-clé ────────────────────────────────────── */

/* Conteneur des chips (sous le champ input) */
.keyword-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Chip individuelle */
.keyword-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px 3px 9px;
    border: 1.5px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.keyword-chip i {
    font-size: 10px;
    opacity: 0.8;
}

.keyword-chip:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

/* Chip sélectionnée (correspond à la valeur actuelle du champ) */
.keyword-chip.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(54, 177, 179, 0.35);
}

.keyword-chip.active i {
    opacity: 1;
}

/* ─── Modale d'édition complète d'une histoire ──────────────────────────── */

/* Conteneur légèrement plus large pour accueillir les onglets */
.edit-story-container {
    max-width: 640px;
}

/* Barre d'onglets */
.edit-story-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0;
}

/* Bouton d'onglet */
.edit-tab-btn {
    flex: 1;
    padding: 9px 10px;
    border: 2px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.edit-tab-btn:hover {
    background-color: rgba(54, 177, 179, 0.12);
    color: var(--primary-color);
}

.edit-tab-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Panneau d'onglet : hauteur minimale pour éviter le saut visuel */
.edit-tab-panel {
    min-height: 150px;
}

/* Responsive : onglets en colonne sur très petits écrans */
@media (max-width: 420px) {
    .edit-story-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 4px;
        margin-bottom: 12px;
    }
    .edit-tab-btn {
        border-radius: 8px;
        border: 2px solid var(--primary-color);
        justify-content: center;
    }
    .edit-tab-btn.active {
        border-color: var(--primary-color);
    }
}

/* ──────────────────────────────────────────────────────────────────────────── */

/* Ligne thème + mot-clé côte à côte dans le formulaire */
.story-form-row {
    display: flex;
    gap: 16px;
}

.story-form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.story-form-col select,
.story-form-col input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--background-color);
    box-sizing: border-box;
}

.keyword-optional {
    font-size: 0.78em;
    font-weight: normal;
    color: #888;
}

/* Conteneur du filtre par mot-clé (au-dessus des histoires perso) */
.keyword-filter-container {
    margin: 0 0 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cancel-btn,
.save-btn {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.cancel-btn {
    background-color: #f0f0f0;
    color: #333;
}

.save-btn {
    background-color: var(--primary-color);
    color: white;
}

.cancel-btn:hover {
    background-color: #e0e0e0;
}

.save-btn:hover {
    background-color: #3a5d97;
}

/* LIVRE */
.book-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    z-index: 10;
}

.book {
    width: 100%;
    height: 100%;
    display: flex;
    perspective: 1500px;
}

.page-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.page {
    position: relative; 
    width: 45%; 
    height: 90%;
    top: 5%;
    background-color: var(--page-color);
    border-radius: 5px;
    box-shadow: 0 5px 15px var(--shadow-color);
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin: 0 2%; 
}

.left-page {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.right-page {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.text-page .page-content {
    padding: 10px 15px;
    font-size: var(--font-size-medium);
    /* `line-height` était ici à 1.8, et réécrit en fin de fichier à
       `var(--line-height)` — c'est-à-dire au réglage d'interligne du panneau
       de configuration, qui gagnait. La valeur 1.8 n'a jamais été appliquée
       depuis que ce réglage existe. Retirée au Lot 8, tâche 5. */
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.page-text {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-right: 5px;
}

.image-page .page-content {
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.page-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.page-number {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

/* NAVIGATION */
.nav-buttons {
    position: fixed;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 20;
}

.nav-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: all 0.3s;
}

.nav-btn:hover {
    transform: scale(1.1);
    background-color: var(--secondary-color);
}

.nav-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.home-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 20;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-color);
}
.reset-btn {position: fixed;
    top: 20px;
    left: 100px;
    z-index: 20;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-color);
}
/* SYLLABES ET LETTRES MUETTES */
.syllabe {
    display: inline;
    font-weight: 500;
    padding: 1px 0;
    border-radius: 2px;
    white-space: nowrap;
}

/* Les cinq couleurs de la méthode syllabique étaient écrites ici en dur
   (`#c62828`, `#1565c0`…), puis **réécrites** en fin de fichier à partir des
   variables `--sy-*` du bloc « Daltonisme ». Mêmes sélecteurs, même
   spécificité : les secondes gagnaient, celles-ci étaient mortes. Pire, elles
   donnaient à penser que changer une couleur ici suffisait — alors que la
   palette réellement servie se choisit par `--sy-rouge` et consorts, seuls
   capables de suivre `body[data-syll-palette]`. Retirées au Lot 8, tâche 5 :
   les valeurs par défaut des variables sont exactement ces cinq couleurs. */

/* Style pour les lettres muettes */
.lettre-muette {
    color: #9e9e9e; /* Gris */
    font-style: italic;
    text-decoration: line-through;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    display: inline;
    opacity: 0.7;
    white-space: nowrap;
}

/* Style pour les digrammes et trigrammes */
.digramme {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.texte-defaut {
    color: #333;
    display: inline;
    white-space: nowrap;
}

/* Prévenir les sauts de ligne non désirés */
.page-content span {
    display: inline;
    white-space: normal;
}

/* Ajout d'un conteneur pour éviter les sauts de ligne */
.texte-conteneur {
    display: inline;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Assurer que les mots ne sont pas coupés */
.mot {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: top;
    margin-right: 0.1em; /* Espace entre les mots */
}

.mot-long {
    word-break: break-word;
}

/* `@keyframes pageFlip` vivait ici — une rotation de 180° sur l'axe Y,
   déclarée et **jamais appliquée à quoi que ce soit**. La tâche 5 du Lot 7
   demandait de neutraliser « les animations de tournage de page » sous
   `prefers-reduced-motion` : il n'y en avait pas. Tourner une page remplace
   son contenu, sans transition. Les keyframes sont parties plutôt que d'être
   couvertes par une règle qui n'aurait rien couvert. */

/* RESPONSIVE */
@media (max-width: 768px) {
    .book {
        flex-direction: column;
    }

    .page-container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        height: 100%;
      }
    
      /* Un premier `.page` et un `.left-page, .right-page` figuraient ici,
         recopiés **mot pour mot** dans les trois règles qui suivent — cinq
         `!important` qui n'ont jamais rien emporté, puisque les règles
         identiques d'après les battaient à égalité de spécificité. Retirés au
         Lot 8, tâche 5 : les valeurs sont inchangées, seul le doublon part. */
    .page {
        width: 95% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .left-page {
        top: 3%;
        left: 5%;
        position: static !important;
        border-radius: 5px !important;
    }

    .right-page {
        bottom: 3%;
        left: 5%;
        top: auto;
        right: auto;
        position: static !important;
        border-radius: 5px !important;
    }

    .text-page .page-content {
        padding: 10px;
    }
    
    .level-selector {
        top: 5px;
        right: 5px;
        padding: 3px 6px;
    }
    
    .level-btn {
        padding: 3px 6px;
    }
    
    .home-btn {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .reset-btn {
        top: 10px;
        left: 50px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .nav-buttons {
        bottom: 10px;
    }
    
    .nav-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .page-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    
    .page {
        width: 48% !important;
        height: 90vh !important;
        position: relative !important;
        margin: 0 !important;
        border-radius: 5px !important;
    }
    
    .left-page, .right-page {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
    }
    
    .text-page .page-content {
        max-height: 80vh;
        overflow-y: auto;
        padding: 15px;
    }
    
    .image-page img {
        max-height: 80vh;
        object-fit: contain;
    }
    
    .nav-buttons {
        bottom: 5px;
    }
    
    .home-btn {
        top: 5px;
        left: 5px;
    }
    
    .reset-btn {
        top: 5px;
        left: 50px;
    }
    
    .level-selector {
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 480px) {
    .library {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        padding: 15px 10px 60px 10px; /* Ajout de padding en bas pour éviter que le contenu soit caché par le footer */
    }

    :root {
        --font-size-small: 14px;
        --font-size-medium: 18px;
        --font-size-large: 22px;
        --font-size-xlarge: 26px;
    }
    
    .page {
        width: 92%;
        height: 42%;
    }
    
    .left-page {
        top: 1%;
        left: 5%;
        position: static !important;
        border-radius: 5px !important;
    }
    
    .right-page {
        bottom: 1%;
        left: 5%;
        top: auto;
        right: auto;
        position: static !important;
        border-radius: 5px !important;
    }
    
    .text-page .page-content {
        font-size: var(--font-size-small);
        line-height: 1.5;
        padding: 8px;
    }
    
    .book-title {
        font-size: 14px;
        padding: 5px;
    }
    
    .add-story-btn {
        bottom: 30px;
        right: 15px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .form-container {
        padding: 15px;
        max-height: 95vh;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 8px;
        font-size: 14px;
    }
    
    .story-form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .cancel-btn, 
    .save-btn {
        width: 100%;
        padding: 10px;
    }
    
    .level-selector {
        padding: 2px 4px;
    }
    
    .level-btn {
        padding: 2px 4px;
    }
    
    .level-btn[data-level="petite"] {
        font-size: 12px;
    }

    .level-btn[data-level="moyenne"] {
        font-size: 14px;
    }

    .level-btn[data-level="grande"] {
        font-size: 16px;
    }

    .level-btn[data-level="très grande"] {
        font-size: 18px;
    }
    
    .footer {
        padding: 3px 5px;
        font-size: 10px;
    }
}

/* Le bloc `@media (max-width: 360px)` qui vivait ici — neuf règles, de
   `.library` à `.level-selector` — était recopié quelques centaines de lignes
   plus bas, **à une valeur près** : `.page { width: 96% }` contre `95%`. Le
   second l'emportant sur toute la ligne, ce premier bloc était entièrement
   mort, y compris son 96 % que personne n'a jamais vu. Retiré au Lot 8,
   tâche 5 ; la copie survivante est la seule qui agissait. */

/* Sections d'histoires — **les quatre règles fusionnées**.

   Elles étaient écrites deux fois dans ce fichier, à mille quatre cents lignes
   d'écart, et les secondes gagnaient sans le dire : un `.section-header` réglé
   à `margin-bottom: 15px` s'affichait à `1rem`, un `.section-title` qu'on
   croyait turquoise et de 24 px était gris et de 1,5 rem. C'est le défaut que
   le Lot 4 avait rencontré sans le corriger — « ajouter cette classe à un
   rayon en changeait l'espacement ».

   Les deux jeux sont fusionnés dans **le résultat qui était déjà servi au
   navigateur** : dernière déclaration gagnante, propriété par propriété. Deux
   propriétés viennent du premier jeu et n'existaient nulle part ailleurs — le
   `grid-column: 1 / -1` qui fait qu'un rayon occupe toute la largeur de la
   grille, et le filet sous le titre. Une fusion faite « en gardant la plus
   récente » les aurait perdues.

   ── Pourquoi ici, et pas en tête de fichier avec `.library` ────────────────
   Parce que `.favorites-section` (ligne ~377) porte `padding: 15px` et
   `margin-bottom: 25px`, à **spécificité égale** et entre les deux jeux. Seul
   son rang dans le fichier décidait que le rayon des favoris recevait 80 px de
   marge basse et non 15. Fusionner à la place du premier jeu — ce qui a été
   tenté — rendait la main à `.favorites-section` et **rétrécissait le rayon
   des favoris de 65 px**. Le défaut ne s'est pas vu à l'œil ; il s'est vu à la
   comparaison des styles calculés. La règle fusionnée reste donc là où était
   celle qui gagnait.

   Lot 8, tâche 5. */
.story-section {
    grid-column: 1 / -1;
    margin-bottom: 2rem;
    padding-bottom: 80px; /* Que le pied de page ne recouvre pas les vignettes. */
}

.section-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title {
    position: relative;
    display: flex;
    align-items: center;
    color: #333;
    margin: 0;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 5px;
}

.empty-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
}

/* Infobulles — attention, ce bloc **redéfinit** `.info-icon`, `.info-tooltip`,
   `.info-tooltip h3` et `.info-tooltip p`, déjà définis plus haut, et il n'a
   **pas** été fusionné avec eux. Ce n'est pas un oubli.

   Entre les deux jeux s'intercalent `.custom-stories-info`,
   `.custom-stories-tooltip` et `.new-stories-tooltip`, qui portent sur les
   mêmes éléments et les mêmes propriétés à spécificité égale. L'ordre décide
   donc de tout, et il décide **différemment selon la propriété** : la taille
   d'une icône d'information vient de `.custom-stories-info` parce qu'elle est
   écrite entre les deux, sa couleur vient du second `.info-icon` parce qu'il
   est écrit après. Rapprocher les deux jeux — dans un sens ou dans l'autre —
   change ce qui s'affiche.

   Le résultat actuel n'est d'ailleurs pas voulu : l'infobulle reçoit à la fois
   `bottom: 30px` (premier jeu) et `top: 100%` (second), ce qui l'étire entre
   les deux. La démêler demande de **décider** de quoi elle doit avoir l'air,
   ce qui est une décision d'interface, pas un dédoublonnage. Laissée telle
   quelle, et signalée au plan. */
.info-icon {
    margin-left: 0.5rem;
    cursor: pointer;
    position: relative;
    color: #007bff;
}

.info-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    color: #333;
}

.info-tooltip.active {
    display: block;
}

.info-tooltip h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #007bff;
}

.info-tooltip p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-tooltip a {
    color: #007bff;
    text-decoration: none;
}

.info-tooltip a:hover {
    text-decoration: underline;
}

/* Styles pour le bouton d'importation */
.import-btn {
    margin-left: 0.5rem;
    cursor: pointer;
    color: #28a745;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.import-btn:hover {
    transform: scale(1.1);
}
  
/* Lecteur audio */
.audio-player {
    position: fixed;
    top: 10px;
    right: 100px;
    z-index: 100;
    display: flex;
    align-items: center;
}

.audio-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.audio-toggle:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

.audio-controls {
    display: none;
    background-color: white;
    border-radius: 20px;
    padding: 10px 15px;
    margin-left: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    gap: 10px;
}

.audio-controls.active {
    display: flex;
}

#audioTrack {
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #f8f9fa;
    color: var(--text-color);
    outline: none;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

#volumeSlider {
    width: 80px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    outline: none;
    border-radius: 5px;
}

#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
    .audio-player {
        top: 60px;
        right: 10px;
    }
    
    .audio-toggle {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .audio-controls {
        position: absolute;
        top: 45px;
        right: 0;
        flex-direction: column;
        width: 200px;
    }
    
    .volume-control {
        width: 100%;
        justify-content: space-between;
    }
    
    #volumeSlider {
        width: 120px;
    }
}

/* Notification d'orientation paysage */
.landscape-notification {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    animation: fadeInUp 0.5s ease-out;
}

.landscape-notification i {
    margin-right: 5px;
    animation: rotate 2s infinite linear;
    display: inline-block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Afficher la notification uniquement sur les appareils mobiles en mode portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .landscape-notification {
        display: block;
    }
    
    /* Cacher la notification après un délai */
    .landscape-notification.hide {
        animation: fadeOut 0.5s forwards;
    }
    
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
            visibility: hidden;
        }
    }
    
    /* Redimensionnement des pages pour les smartphones en mode portrait */
    .page {
        width: 94%;
        height: 47%;
        margin: 0 auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
    }
    
    .left-page {
        top: 1.5%;
    }
    
    .right-page {
        bottom: 1.5%;
    }
    
    .text-page .page-content {
        max-height: 100%;
        overflow-y: auto;
        padding: 12px;
        line-height: 1.6;
    }
    
    .image-page img {
        max-height: 92%;
        object-fit: contain;
        padding: 8px;
    }
    
    /* Ajustement des contrôles de navigation pour une meilleure accessibilité */
    .nav-controls {
        bottom: 49.5%;
        z-index: 100;
    }
    
    .nav-btn {
        opacity: 0.8;
    }
}

/* Pour les très petits écrans */
@media (max-width: 360px) {
    .library {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .book-cover {
        height: 180px;
    }
    
    .page {
        width: 95%;
        height: 40%;
    }
    
    .left-page {
        top: 1%;
        left: 2.5%;
    }
    
    .right-page {
        bottom: 1%;
        left: 2.5%;
        top: auto;
        right: auto;
    }
    
    .home-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .reset-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .level-selector {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }
}

/* Style pour le surlignage des mots pendant la lecture TTS */
.highlight {
    background-color: rgba(255, 255, 0, 0.5);
    padding: 2px 0;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

/* Style pour le mode sombre */
.dark-mode .highlight {
    background-color: rgba(255, 235, 59, 0.7);
    color: #000;
}

/* Classe pour désactiver la méthode syllabique */
.disable-syllabic {
    /* Styles généraux pour désactiver la méthode syllabique */
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

.disable-syllabic span.syllable {
    /* Supprime la mise en évidence des syllabes */
    color: inherit !important;
    font-weight: normal !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Supprime les tirets de séparation des syllabes */
.disable-syllabic span.syllable-separator {
    display: none !important;
}

/* Assure que le texte s'affiche normalement */
.disable-syllabic span.texte-defaut,
.disable-syllabic span {
    color: inherit !important;
    font-weight: normal !important;
    background-color: transparent !important;
}

/* Amélioration de la visibilité du texte pendant la lecture TTS */
.page-text {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Amélioration pour la sélection de texte sur mobile */
.page-text span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ÉCRAN DE DÉMARRAGE */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease-in-out;
}

.splash-logo {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .splash-logo {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .splash-logo {
        width: 120px;
    }
}

@media (max-width: 360px) {
    .splash-logo {
        width: 100px;
    }
}

.splash-title {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .splash-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .splash-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 360px) {
    .splash-title {
        font-size: 1.5rem;
    }
}

.splash-subtitle {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.loading-bar {
    width: 80%;
    max-width: 300px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    height: 100%;
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    transition: width 2s;
}

/* Styles pour le bouton de taille de texte */
.font-size-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 20;
  background-color: var(--primary-color);
  border: none;
  border-radius: 30px;
  padding: 6px 12px;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}

.font-size-toggle:hover {
  background-color: var(--secondary-color);
}

.font-size-A {
  display: inline-block;
  line-height: 1;
}

.font-small { font-size: 12px; }
.font-medium { font-size: 16px; }
.font-large { font-size: 20px; }

.bookmark-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 6px;
    font-size: 16px;
    color: #4a6da7;
    z-index: 4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône favori */
.favorite-icon {
    position: absolute;
    top: 45px;
    left: 5px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 6px;
    font-size: 16px;
    color: #FFD700;
    z-index: 4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    user-select: none;
}

.favorite-icon:hover {
    transform: scale(1.1);
}

/* Étoile non remplie (outline) */
.favorite-icon.not-favorite {
    color: #ddd;
}

.favorite-icon.not-favorite:hover {
    color: #FFD700;
}

/* Étoile remplie */
.favorite-icon.is-favorite {
    color: #FFD700;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

/* Compteur de vues */
.view-badge{
    position:absolute;
    top:6px;                /* on le met dans le coin */
    right:6px;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:.75em;
    line-height:1;
    padding:2px 6px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:4px;
    pointer-events:none;    /* clics traversants */
    z-index:2;              /* au-dessus de l’image */
}

.high-contrast .view-badge{
    background:var(--secondary-color);
    color:#000;
}

/* === Accessibilité : interligne & espacement personnalisables === */
.text-page .page-content{
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
  }

/* === Highlight TTS === */
.page-text .highlight{
    background: var(--secondary-color);
    border-radius: 4px;
    padding: 0 2px;
  }

.tts-btn{
    background: var(--primary-color);
    color:#fff;
    border:none;
    border-radius:30px;
    padding:8px 16px;
    font-size:1rem;
    cursor:pointer;
    box-shadow:0 2px 6px var(--shadow-color);
    margin:0 10px;
    display:flex;
    align-items:center;
    gap:6px;
    transition:background 0.3s;
}
.tts-btn:hover{ 
    background: #2a8e90; 
}

/* Synthèse vocale coupée dans les réglages.
   L'état est porté par une classe sur <body>, posée par applyTTSVisibility()
   (imagilire-open-book.js) après lecture via psGet() — donc en suivant le
   profil actif. Une classe plutôt qu'un style en ligne : `.tts-btn` déclare
   `display:flex` ci-dessus, qu'un `style="display:inline-flex"` de
   restauration réécrivait au passage. Spécificité 1,1,1 contre 0,1,0 :
   inutile d'ajouter un `!important` de plus.
   `.nav-buttons` étant en `justify-content:space-between`, retirer le bouton
   central laisse « précédent » et « suivant » à leurs extrémités : la barre
   de navigation n'a rien à recalculer. */
body.tts-disabled #ttsBtn,
body.tts-disabled #ttsStopBtn {
    display: none;
}

/* Styles pour l'optimisation des images */
.optimization-info {
    background-color: #e8f4f8;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.optimization-info i {
    color: var(--primary-color);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.optimization-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
}

/* Informations de compression */
.compression-info {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px;
    margin: 15px 0;
    font-size: 14px;
    color: #495057;
    border-left: 4px solid var(--primary-color);
    animation: slideIn 0.3s ease-out;
}

.compression-info.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-left-color: #28a745;
    color: #155724;
}

.compression-info.warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    border-left-color: #ffc107;
    color: #856404;
}

.compression-info.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-left-color: #dc3545;
    color: #721c24;
}

.compression-info.info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-left-color: #17a2b8;
    color: #0c5460;
}

/* Container pour l'aperçu avec overlay */
.preview-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    gap: 10px;
    backdrop-filter: blur(2px);
}

.preview-overlay i {
    font-size: 24px;
    color: var(--primary-color);
    animation: spin 1s linear infinite;
}

.preview-overlay span {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    text-align: center;
}

/* Amélioration de l'aperçu d'image */
.image-preview-container {
    text-align: center;
}

.image-preview-container p {
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-color);
}

#imagePreview {
    border: 2px solid #e9ecef;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 100%;
    height: auto;
    background-color: #f8f9fa;
}

#imagePreview:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Indicateur de progression pour le chargement */
.loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--primary-color);
    margin-top: 10px;
}

.loading-indicator i {
    animation: spin 1s linear infinite;
}

/* Amélioration des champs de fichier */
.form-group input[type="file"] {
    border: 2px dashed #dee2e6;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.form-group input[type="file"]:hover {
    border-color: var(--primary-color);
    background-color: #e8f4f8;
}

.form-group input[type="file"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(54, 177, 179, 0.1);
}

/* Style pour les messages d'aide */
.form-group small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.3;
}

/* Animation pour l'apparition des informations de compression */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* `@keyframes spin` était déclaré une seconde fois ici, identique au premier
   (plus haut, sous « .loading-spinner »). Deux déclarations du même nom : la
   dernière gagne, et corriger la première n'avait aucun effet. Retirée au
   Lot 8, tâche 5 — les trois rouages d'attente tournent toujours pareil. */

/* Style pour les statistiques de compression */
.compression-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
}

.compression-stats .stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compression-stats .stat i {
    font-size: 10px;
}

/* Couleurs pour les différents types de messages */
.success-text { color: #28a745; }
.warning-text { color: #ffc107; }
.error-text { color: #dc3545; }
.info-text { color: var(--primary-color); }

/* Mode haut contraste pour la compression */
body.high-contrast .compression-info {
    background-color: var(--background-color);
    color: var(--text-color);
    border-color: var(--secondary-color);
}

body.high-contrast .compression-info.success {
    background-color: var(--background-color);
    border-left-color: var(--secondary-color);
    color: var(--text-color);
}

body.high-contrast .compression-info.warning,
body.high-contrast .compression-info.error,
body.high-contrast .compression-info.info {
    background-color: var(--background-color);
    border-left-color: var(--secondary-color);
    color: var(--text-color);
}

body.high-contrast .preview-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--text-color);
}

body.high-contrast #imagePreview {
    border-color: var(--secondary-color);
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
    .optimization-info {
        padding: 8px;
        font-size: 13px;
        flex-direction: column;
        gap: 8px;
    }
    
    .compression-info {
        padding: 8px;
        font-size: 13px;
        margin: 10px 0;
    }
    
    .form-group input[type="file"] {
        padding: 15px 10px;
        font-size: 14px;
    }
    
    .preview-overlay i {
        font-size: 20px;
    }
    
    .preview-overlay span {
        font-size: 12px;
        padding: 0 10px;
    }
    
    .image-preview-container p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .optimization-info {
        padding: 6px;
        font-size: 12px;
    }
    
    .compression-info {
        padding: 6px;
        font-size: 12px;
        margin: 8px 0;
    }
    
    .form-group input[type="file"] {
        padding: 12px 8px;
        font-size: 13px;
    }
    
    .preview-overlay {
        gap: 6px;
    }
    
    .preview-overlay i {
        font-size: 18px;
    }
    
    .preview-overlay span {
        font-size: 11px;
    }
    
    .form-group small {
        font-size: 11px;
    }
}

/* Amélioration de l'accessibilité */
.compression-info:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.preview-wrapper:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 5px;
}

/* Animation plus fluide pour les changements d'état */
.compression-info {
    transition: all 0.3s ease;
}

.preview-overlay {
    transition: opacity 0.3s ease;
}

/* Styles pour les tooltips de progression */
.progress-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.progress-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

.edit-page-image-btn{
    position: absolute; 
    top: 150px; /* Positioné en haut plutôt qu'en haut pour être moins accessible au pouce */
    right: 15px;
    width: 36px; height: 36px; /* Taille optimale pour l'interaction tactile sans déborder */
    border: none; 
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre pour améliorer la visibilité */
    cursor: pointer;
    display: none; /* Masqué par défaut sur desktop */
    z-index: 10; /* S'assurer qu'il est au-dessus des autres éléments */
    /* S'assurer que le bouton reste dans les limites de la page */
    transform: translate(0, 0);
  }
  
  /* Afficher au survol sur desktop */
  .image-page:hover .edit-page-image-btn{ display:block; }
  
  /* Styles spécifiques pour mobile */
  @media (max-width: 768px) {
    .edit-page-image-btn {
      display: block; /* Toujours visible sur mobile */
      opacity: 0.9;
      /* Ajustements pour garantir que le bouton reste dans la page sur mobile */
      bottom: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
    }
    
    /* S'assurer que la page droite peut contenir le bouton correctement */
    .image-page .page-content {
      position: relative;
      padding-bottom: 15px; /* Espace pour le bouton */
    }
    
    /* S'assurer que l'image ne cache pas le bouton */
    .page-image {
      margin-bottom: 5px;
    }
  }

  /* styles.css — à la fin du fichier */
body.edition-disabled .delete-btn,
body.edition-disabled .edit-image-btn,
body.edition-disabled .edit-page-image-btn {
    display: none !important;
}

/* === Daltonisme : Palettes & Indices redondants ================= */

/* Variables par défaut (palette actuelle, overridable) */
:root{
    --sy-rouge:#c62828;
    --sy-bleu:#1565c0;
    --sy-vert:#2e7d32;
    --sy-violet:#6a1b9a;
    --sy-orange:#e65100;
    --sy-bg-strength: 18%;
  }
  
  /* Raccorder tes classes existantes aux variables (override doux) */
  .syllabe-rouge  { color: var(--sy-rouge); }
  .syllabe-bleu   { color: var(--sy-bleu); }
  .syllabe-vert   { color: var(--sy-vert); }
  .syllabe-violet { color: var(--sy-violet); }
  .syllabe-orange { color: var(--sy-orange); }
  
  /* ---------- Palettes color-blind friendly ---------- */
  /* Tol (très robuste proto/deutéro/tritano) */
  body[data-syll-palette="tol"]{
    --sy-rouge:#CC6677;
    --sy-bleu:#88CCEE;
    --sy-vert:#44AA99;
    --sy-violet:#332288;
    --sy-orange:#DDCC77;
  }
  
  /* OI Bright (forte différenciation) */
  body[data-syll-palette="oi-a"]{
    --sy-rouge:#D55E00;
    --sy-bleu:#56B4E9;
    --sy-vert:#009E73;
    --sy-violet:#0072B2;
    --sy-orange:#F0E442;
  }
  
  /* Blue–Orange Safe (contrastes nets) */
  body[data-syll-palette="bo-safe"]{
    --sy-rouge:#A23B72;
    --sy-bleu:#2E86AB;
    --sy-vert:#20A39E;
    --sy-violet:#264653;
    --sy-orange:#EDAE49;
  }
  
  /* ---------- Indices non chromatiques ---------- */
  /* Fond léger sous chaque syllabe (ne pas dépendre que de la couleur) */
  body[data-syll-bg="on"] .syllabe{
    padding: 0 .18em; border-radius: .25em;
  }
  body[data-syll-bg="on"] .syllabe-rouge  { background: color-mix(in srgb, var(--sy-rouge)  var(--sy-bg-strength), transparent); }
  body[data-syll-bg="on"] .syllabe-bleu   { background: color-mix(in srgb, var(--sy-bleu)   var(--sy-bg-strength), transparent); }
  body[data-syll-bg="on"] .syllabe-vert   { background: color-mix(in srgb, var(--sy-vert)   var(--sy-bg-strength), transparent); }
  body[data-syll-bg="on"] .syllabe-violet { background: color-mix(in srgb, var(--sy-violet) var(--sy-bg-strength), transparent); }
  body[data-syll-bg="on"] .syllabe-orange { background: color-mix(in srgb, var(--sy-orange) var(--sy-bg-strength), transparent); }
  
  /* Motifs (lisibles même en niveaux de gris) */
  body[data-syll-patterns="on"] .syllabe{ background-blend-mode: multiply; }
  body[data-syll-patterns="on"] .syllabe-rouge{
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 12px);
  }
  body[data-syll-patterns="on"] .syllabe-bleu{
    background-image: radial-gradient(rgba(0,0,0,.16) 18%, transparent 19%);
    background-size: 10px 10px;
  }
  body[data-syll-patterns="on"] .syllabe-vert{
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 6px, transparent 6px 12px),
                      repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 6px, transparent 6px 12px);
  }
  body[data-syll-patterns="on"] .syllabe-violet{
    background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.16) 0 4px, transparent 4px 8px);
  }
  body[data-syll-patterns="on"] .syllabe-orange{
    background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 12px);
  }
  
  /* Soulignés distinctifs (secours ultime) */
  body[data-syll-underline="on"] .syllabe-rouge  { text-decoration: underline; text-decoration-style: solid;  text-decoration-thickness: .12em; text-underline-offset: .12em; }
  body[data-syll-underline="on"] .syllabe-bleu   { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: .12em; text-underline-offset: .12em; }
  body[data-syll-underline="on"] .syllabe-vert   { text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: .12em; text-underline-offset: .12em; }
  body[data-syll-underline="on"] .syllabe-violet { text-decoration: underline; text-decoration-style: wavy;   text-decoration-thickness: .12em; text-underline-offset: .12em; }
  body[data-syll-underline="on"] .syllabe-orange { text-decoration: underline; text-decoration-style: double; text-decoration-thickness: .10em; text-underline-offset: .16em; }
  
  /* Mode Achromat (N&B) */
  body[data-syll-palette="gray"]{
    --sy-rouge:#111111;
    --sy-bleu:#333333;
    --sy-vert:#666666;
    --sy-violet:#999999;
    --sy-orange:#DDDDDD;
  }
  body[data-syll-achromat="on"]{
    --sy-bg-strength: 24%;
  }
  body[data-syll-achromat="on"] .syllabe{ background-blend-mode: multiply; }
  body[data-syll-achromat="on"] .syllabe-rouge  { text-decoration: underline; text-decoration-style: solid;  }
  body[data-syll-achromat="on"] .syllabe-bleu   { text-decoration: underline; text-decoration-style: dashed; }
  body[data-syll-achromat="on"] .syllabe-vert   { text-decoration: underline; text-decoration-style: dotted; }
  body[data-syll-achromat="on"] .syllabe-violet { text-decoration: underline; text-decoration-style: wavy;   }
  body[data-syll-achromat="on"] .syllabe-orange { text-decoration: underline; text-decoration-style: double; }
  
  /* Badges 1–5 optionnels (indice non visuel couleur) */
  body[data-syll-badges="on"] .syllabe::after{
    content: attr(data-i);
    font-size: 0.65em;
    margin-left: .15em;
    vertical-align: super;
    opacity: .7;
  }
  
  /* Compatibilité haut contraste (si tu as une classe globale) */
  body.high-contrast .syllabe{ background-image:none !important; }
  

/* =========================================================================
   MOUVEMENT RÉDUIT                                        (Lot 7, tâche 5)
   -------------------------------------------------------------------------
   Neutralise animations et transitions pour qui a demandé moins de mouvement
   dans son système. Le réglage existe sur les trois plateformes (Windows :
   « Afficher les animations », macOS/iOS : « Réduire les animations »,
   Android : « Supprimer les animations ») et il est réclamé pour des raisons
   qui vont du mal des transports à la migraine et aux troubles de
   l'attention — trois motifs qui concernent directement le public de cette
   application.

   ── Pourquoi un filet global, et pourquoi ici ───────────────────────────
   Neuf feuilles traitaient déjà le cas pour leur propre compte, les plus
   récentes du projet. Onze autres ne le faisaient pas, et un projet sans
   étape de compilation n'a aucun moyen de rappeler à la douzième qu'elle
   devra y penser. Ce bloc est donc la garantie de base : une feuille qui
   veut un comportement plus fin le déclare chez elle, et ce qu'elle ne
   déclare pas est couvert ici.

   ── Pourquoi `!important`, une fois ─────────────────────────────────────
   Le projet en compte quarante-deux et le Lot 8 prévoit d'en réduire le
   nombre. Celui-ci n'est pas du même genre : une préférence système doit
   l'emporter sur toute règle de la feuille, y compris sur une déclaration
   en ligne posée par du JavaScript. C'est précisément le cas où le mot est
   à sa place, et la raison pour laquelle tous les projets qui traitent ce
   réglage l'écrivent ainsi.

   ── Pourquoi 0,01 ms et non `none` ──────────────────────────────────────
   Une animation de durée nulle ne déclenche pas `animationend`. Aucun code
   du projet n'écoute cet événement aujourd'hui, mais le jour où l'un le
   fera, la durée minuscule le laissera fonctionner : l'animation se termine
   immédiatement **et** le signale.

   ── Ce que ce bloc ne peut pas atteindre ────────────────────────────────
   Le défilement déclenché par `scrollIntoView({behavior: 'smooth'})`, que la
   synthèse vocale utilise pour suivre le mot lu : l'option JavaScript
   l'emporte sur la feuille de style. Il est traité dans
   `js/imagilire-mini-tts.js`, qui interroge la préférence lui-même.

   ── Ce qui est volontairement traité ailleurs ───────────────────────────
   Le clignotement de fin de séance du sablier parental
   (`css/imagilire-mini-session-timer.css`). Le supprimer sans le remplacer
   retirerait au parent la seule indication que la séance est terminée : il
   devient un repère fixe plutôt que rien.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}