:root {
     --primary: blue;
    --selection: #00E676; /* Vert pour la sélection */
    --fondJaune: #edd99e;
    --fondBleuUni: #0d3964;
    --qayda-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --qayda-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --qayda-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --qayda-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    --qayda-header-height: 4rem;
    --qayda-bottom-nav-height: 4.5rem;
    --qayda-side-nav-width: 6rem;
    --borduresHaut: calc(var(--qayda-header-height) + var(--qayda-safe-top));
    --borduresBas: calc(var(--qayda-bottom-nav-height) + var(--qayda-safe-bottom));
    --borduresHautBas: calc(var(--borduresHaut) + var(--borduresBas));
}

:root,body.light {
   /* --- 1. PRIMARY (Bleu Profond - Ton identité principale) --- */
    --primary: #2380cb;         /* Base */
   --on-primary: white;      /* Texte sur fond primary */

    /* --- 2. SECONDARY (Ambre/Or - Pour l'interactivité/Focus) --- */
    --secondary: #FFC107;       /* Base */
    --secondary-container: #C79100;  /* Or foncé (Pour le texte sur fond jaune) */
    --on-secondary: #000000;    /* Texte sur fond secondary */ /* FFECB3 */
    --on-secondary-container: #0D47A1;    /* Texte sur fond secondary */

    /* --- 3. TERTIARY (Teal/Turquoise - Pour badges 'Partiel', Infos, Succès) --- */
    --tertiary: #009688;        /* Base jaune le matin*/
    --tertiary-light: #ffe495;  /* Menthe à l'eau (Fond doux) */
    --on-tertiary: white;     /* Texte sur fond tertiary */
    
    /* pale cobalt: #FFFACD --------- cobalt: #0047AB */
    
}
body.dark
{
    /* Déclinaison sombre du fond jaune Qayda, lisible avec les textes clairs. */
    --fondJaune: #4a3a12;
     /* --- 1. PRIMARY (Bleu Profond - Ton identité principale) --- */
    --primary: #0D47A1;         /* Base */
     --on-primary: #f4e6bc;      /* Texte sur fond primary */
    
     /* --- 2. SECONDARY (Ambre/Or - Pour l'interactivité/Focus) --- */
    --secondary: #FFC107;       /* Base */
    --secondary-container: #5a4610; /* Crème (Pour les fonds de badges) */
    
     /* --- 3. TERTIARY (Teal/Turquoise - Pour badges 'Partiel', Infos, Succès) --- */
    --tertiary: #004D40;        /* Base */
     --on-tertiary: wheat;
   
    --tertiary-light: #004D40;  /* Menthe à l'eau (Fond doux) */
  
}
body.light{
    --fondQuadrille : repeating-linear-gradient(90deg, rgba(198, 198, 198, 0.05) 0px, rgba(198, 198, 198, 0.05) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(0deg, rgba(198, 198, 198, 0.05) 0px, rgba(198, 198, 198, 0.05) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(0deg, rgba(198, 198, 198, 0.06) 0px, rgba(198, 198, 198, 0.06) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(90deg, rgba(198, 198, 198, 0.06) 0px, rgba(198, 198, 198, 0.06) 1px, transparent 1px, transparent 15px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
    --fondBleu : linear-gradient(135deg, rgb(15, 35, 134) 0%, rgb(15, 35, 134) 15%, rgb(19, 67, 156) 25%, rgb(19, 67, 156) 41%, rgb(23, 99, 178) 51%, rgb(23, 99, 178) 75%, rgb(26, 130, 200) 75%, rgb(26, 130, 200) 92%, rgb(30, 162, 222) 92%, rgb(30, 162, 222) 100%);
}

body.dark{
    --fondQuadrille: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 5px),     repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 5px),     repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 15px),     repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 15px),     linear-gradient(90deg, rgb(20, 20, 20), rgb(20, 20, 20));
    --fondBleu : linear-gradient(
  135deg,
  rgb(8, 18, 70) 0%,
  rgb(8, 18, 70) 15%,
  rgb(10, 30, 90) 25%,
  rgb(10, 30, 90) 41%,
  rgb(12, 45, 115) 51%,
  rgb(12, 45, 115) 75%,
  rgb(15, 65, 135) 75%,
  rgb(15, 65, 135) 92%,
  rgb(18, 85, 155) 92%,
  rgb(18, 85, 155) 100%
);

    
}

.tabs>a.active, .tabs>a.active>i {
    color: var(--secondary) !important;
}

.tertiary-light {   background-color: var(--tertiary-light) !important;     color: ghostwhite;}

body { background-color: var(--fondJaune); /*  overflow: hide; */ }

/* La WebView native se comporte comme une application, sans rebond de page. */
html[data-qayda-platform="android"],
html[data-qayda-platform="ios"] {
    overscroll-behavior: none;
    height: 100%;
}

/* Android suit la hauteur Material/BeerCSS native, les insets restant séparés. */
html[data-qayda-platform="android"] {
    /* 52 dp laisse une cible de 48 dp sans transformer la barre en bandeau. */
    --qayda-header-height: 3.25rem;
    --qayda-game-toolbar-height: 3.75rem;
    --qayda-game-controls-height: 5rem;
}

html[data-qayda-platform="android"] body,
html[data-qayda-platform="ios"] body {
    min-height: 100%;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

html[data-qayda-platform="android"] [data-web-only],
html[data-qayda-platform="ios"] [data-web-only],
html[data-qayda-platform="android"] [data-pwa-only],
html[data-qayda-platform="ios"] [data-pwa-only] {
    display: none !important;
}

body.qayda-dark-theme {
    --fondJaune: #4a3a12;
}

body.qayda-dark-theme #page-image,
body.qayda-dark-theme #dashboard-last-page-image {
    filter: invert(0.9) hue-rotate(180deg);
}

body > header {
    z-index: 1500;
    overflow: visible;
    block-size: var(--borduresHaut);
    min-block-size: var(--borduresHaut);
    padding-block-start: var(--qayda-safe-top);
    padding-inline: var(--qayda-safe-left) var(--qayda-safe-right);
    box-sizing: border-box;
}

body > header > #topNav {
    inline-size: 100%;
    block-size: var(--qayda-header-height);
    min-block-size: var(--qayda-header-height);
    margin: 0;
}

/* BeerCSS garde ses composants, mais Android impose un seul calcul :
   inset système + rangée d'actions. Cela évite les bandes bleues doublées. */
html[data-qayda-platform="android"] body > header {
    block-size: var(--borduresHaut) !important;
    min-block-size: var(--borduresHaut) !important;
    max-block-size: var(--borduresHaut) !important;
    padding-block: var(--qayda-safe-top) 0 !important;
}

html[data-qayda-platform="android"] body > header > #topNav {
    block-size: var(--qayda-header-height) !important;
    min-block-size: var(--qayda-header-height) !important;
    max-block-size: var(--qayda-header-height) !important;
}

html[data-qayda-platform="android"] #topNav > div:not(#drawing-editor-topbar) {
    min-inline-size: 0;
    flex: 1 1 6rem;
}

html[data-qayda-platform="android"] #topNav > button:not([data-ui="#dropdown-pages"]) {
    flex: 0 0 3rem;
}

html[data-qayda-platform="android"] #topNav [data-ui="#dropdown-pages"] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: 100%;
    white-space: nowrap;
}

html[data-qayda-platform="android"] #header-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- LOADER GLOBAL --- */
#global-loader {
    z-index: 9999 !important; /* Au-dessus de TOUT (même les modals/toasts) */
    background-color: var(--background); /* Fond uni pour cacher le reste */
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

#global-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Permet de cliquer à travers une fois caché */
}

.hide {
    /* visibility: hidden;  */
    display: none;
}

/* --- Layout Principal (La Fenêtre de lecture) --- */
main {
    position: fixed; /* On fixe la zone de contenu */
    
    /* DÉFINITION DE LA ZONE VISIBLE (Sans padding) */
    top: var(--borduresHaut);       /* Commence pile sous la barre du haut */
    bottom: 0;    
    left: 0;
    right: 0;
    
    width: 100%;
    height: auto;    /* La hauteur est calculée par top/bottom */
    
    /* GESTION DU SCROLL ET ALIGNEMENT */
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    
    /* PAR DÉFAUT (PC) : On colle en haut */
    justify-content: flex-start;
    align-items: center;
    
    background-color: var(--fondJaune);
    padding: 0 !important; /* DEMANDE RESPECTÉE : Plus aucun padding */
    box-sizing: border-box;
}

/* --- Grid Container (Livre PC) --- */
#book-container {
    display: grid; 
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    
    /* PC : Largeur fixe et collé en haut */
    width: auto;
    margin-top: 20px; /* Juste un petit espace esthétique pour pas coller au pixel près */
    margin-bottom: 20px;
    /* margin-right: 90px; */ /* (barre de droite) */
    
    /* background: white;  */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    height: fit-content;
    transition: transform 0.2s ease-out; 
    transform-origin: center top; 
}
/* --- PC --- */
@media (min-width: 769px) {
    /* Le livre utilise la hauteur libre au lieu d'une largeur fixe, y compris en 4K. */
    #book-container {
        width: min(
            calc((100dvh - var(--borduresHaut) - 1.5rem) * 0.7234),
            calc(100% - 3rem)
        );
        margin-block: 0.75rem;
    }
}
@media (max-width: 768px) {
      #book-container { width: 80%; margin-right:90px; }
    
}

/* --- MOBILE SPÉCIFIQUE (< 600px) --- */
@media (max-width: 600px) {
    /* Les commandes principales gardent une cible tactile proche des 48 dp Android. */
    body > header button,
    #bottom-nav button {
        min-inline-size: 3rem;
        min-block-size: 3rem;
    }

    html,
    body {
        inline-size: 100%;
        block-size: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        position: fixed;
        inset: 0;
    }

    body.game-mode main { margin-bottom: 0 !important; }
    
    main {
        
        /* SUR MOBILE : On active le VRAI centrage vertical */
           /*  bottom: calc(var(--borduresBas) / 2);   */  /* S'arrête pile au dessus de la barre du bas */
            bottom: var(--borduresBas);
            top: var(--borduresHaut);
            /* right: 0px; */
        /* Comme on a défini top/bottom, le navigateur connait le centre exact */
        justify-content: center; 
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Le livre commence sous les barres au lieu d'être centré dans une bordure vide. */
    html[data-qayda-platform="android"] main {
        justify-content: flex-start;
    }

    html[data-qayda-platform="android"] #book-container {
        /* Un souffle visuel, sans recentrer verticalement le livre. */
        margin-block: 0.5rem;
    }

    #bottom-nav {
        position: fixed !important;
        inset-block-start: auto !important;
        inset-inline: 0 !important;
        inset-block-end: 0 !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: var(--borduresBas);
        padding-block-end: var(--qayda-safe-bottom);
        padding-inline: var(--qayda-safe-left) var(--qayda-safe-right);
        box-sizing: border-box;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
    }

    #book-container {
        width: 100%;      
        max-width: 100%;
        
        /* On enlève les marges PC pour laisser le flexbox centrer */
        margin: 0; 
        
        box-shadow: none;
        max-height: 100%; /* S'assure que ça rentre */
    }
    
    #btnWhenPlaying {        margin-left: -1.5rem;   /*    bottom: 80px; */}
    
    #app-snackbar { inline-size: 95%;   }
}

#page-loading-indicator {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 80;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-radius: 2rem;
    color: var(--on-primary);
    background: var(--primary);
    background: color-mix(in srgb, var(--primary) 92%, transparent);
    box-shadow: 0 0.4rem 1.4rem rgb(0 0 0 / 24%);
    pointer-events: none;
}

#page-loading-indicator.page-loading-active {
    display: flex;
}

#page-image.page-image-loading { opacity: 1; }

#offline-books-settings-row.disabled {
    opacity: 0.85;
}

#offline-books-progress-wrap progress {
    inline-size: 100%;
}

#page-interaction-hint {
    position: fixed;
    inset-inline-start: max(1rem, calc(var(--qayda-safe-left) + 1rem));
    inset-block-end: max(1rem, calc(var(--qayda-safe-bottom) + 1rem));
    max-inline-size: min(27rem, calc(100dvw - 2rem));
    z-index: 12;
}

@media (max-width: 600px) {
    #page-interaction-hint {
        inset-block-end: calc(var(--borduresBas) + 1rem);
    }
}

/* Dès 601 px, updateLayout() transforme la navigation BeerCSS en rail droit. */
@media screen and (min-width: 601px) {
    main {
        top: var(--borduresHaut);
        right: calc(var(--qayda-side-nav-width) + var(--qayda-safe-right));
        bottom: 0;
        width: auto;
        inline-size: auto;
        height: auto !important;
        block-size: auto !important;
    }

    body > header {
        right: calc(var(--qayda-side-nav-width) + var(--qayda-safe-right));
        width: auto;
        inline-size: auto;
    }

    /* Le rail droit est hors de la zone du header : la barre ne peut pas passer dessous. */
    #topNav {
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow: clip;
    }

    /* Le sommaire BeerCSS peut s'ouvrir au-dessus du lecteur. */
    #topNav:has(#dropdown-pages.active) {
        overflow: visible;
    }

    #topNav > div:not(#drawing-editor-topbar) {
        min-inline-size: 0;
    }

    #topNav > div:nth-of-type(2) {
        flex: 0 1 15rem;
    }

    #topNav > div:nth-of-type(3) {
        flex: 1 1 0;
        /* L'espace décoratif reste borné pour ne jamais repousser les actions sous le rail droit. */
        max-inline-size: 24rem;
    }

    #topNav > button,
    #topNav > div:nth-of-type(4) {
        flex: 0 0 auto;
    }

    #header-title,
    #btn-case-restreint {
        white-space: nowrap;
    }

    #bottom-nav.right {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        inline-size: calc(var(--qayda-side-nav-width) + var(--qayda-safe-right)) !important;
        min-inline-size: calc(var(--qayda-side-nav-width) + var(--qayda-safe-right));
        block-size: 100dvh !important;
        max-block-size: 100dvh !important;
        min-block-size: 100dvh;
        padding-block: var(--qayda-safe-top) var(--qayda-safe-bottom);
        padding-block-end: var(--qayda-safe-bottom);
        padding-inline: 0 var(--qayda-safe-right);
        box-sizing: border-box;
        flex-direction: column !important;
        transform: translate3d(0, 0, 0);
    }

    #selection-toolbar {
        right: calc(var(--qayda-side-nav-width) + var(--qayda-safe-right));
    }

    /* Ces écrans masquent le rail : seule la zone des touches système est réservée. */
    body.dashboard-mode main,
    body.games-mode main,
    body.drawing-mode main,
    body.global-game-mode main {
        right: var(--qayda-safe-right);
    }

    body.dashboard-mode > header,
    body.games-mode > header,
    body.drawing-mode > header,
    body.global-game-mode > header {
        right: var(--qayda-safe-right);
    }
}

/* En mode sélection, on réduit un peu pour voir les outils */
body.selection-mode #book-container {
    transform: scale(0.95);
    border: 2px solid var(--primary);
}
/* Le conteneur s'assombrit légèrement pour faire ressortir les cases */
body.selection-mode #page-image {
    /* opacity: 0.9; */
    filter: grayscale(40%);
}

#restricted-controls {
    top: calc(var(--borduresHaut) + 0.75rem);
    z-index: 1400;
}

#menuGlobal {       background: var(--fondBleu);  z-index: 2000;  }

#modal-accessibility-settings.settings-page {
    inline-size: 100dvw;
    max-inline-size: 100dvw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
}

.settings-page-body {
    inline-size: min(820px, calc(100dvw - 1rem));
    margin-inline: auto;
    padding: 0.5rem 0.5rem 2rem;
}

/* Cadre commun des écrans de réglages et de choix, sans limiter le livre. */
.app-content-frame.app-content-frame {
    inline-size: 100%;
    max-inline-size: min(920px, calc(100dvw - 2rem));
    margin-inline: auto;
    box-sizing: border-box;
}

#games-screen article {
    cursor: pointer;
}

#dashboard-continue-card {
    cursor: pointer;
    overflow: hidden;
}

.dashboard-continue-layout {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    min-block-size: clamp(9rem, 18vw, 12rem);
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding-inline-end: clamp(0.75rem, 2vw, 1.5rem);
}

.dashboard-page-preview {
    align-self: stretch;
    inline-size: 100% !important;
    block-size: 100% !important;
    min-block-size: 100%;
    object-fit: cover;
    object-position: top center;
}

#dashboard-last-page-image {
    max-inline-size: none;
    max-block-size: none;
}

.dashboard-continue-content {
    align-self: center;
    padding-block: clamp(1rem, 2vw, 1.5rem);
    min-inline-size: 0;
}

.dashboard-continue-action {
    align-self: center;
    justify-self: center;
}

#dashboard-offline-card {
    min-block-size: auto;
}

#dashboard-offline-card nav {
    gap: 0.75rem;
}

#dashboard-offline-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Contrastes renforcés pour les textes fins et les petits boutons du dashboard. */
#dashboard-screen article.secondary-container p {
    color: #211a00;
}

#dashboard-drawing-card button.primary {
    background-color: #1565c0 !important;
    color: #ffffff !important;
}

#dashboard-drawing-card button.tertiary {
    background-color: #00796b !important;
    color: #ffffff !important;
}

body.dashboard-mode main {
    top: var(--borduresHaut);
    bottom: var(--qayda-safe-bottom);
    justify-content: flex-start;
    align-items: center;
}

body.dashboard-mode #bottom-nav,
body.dashboard-mode #btnWhenPlaying {
    display: none !important;
}

body.dashboard-mode #book-container {
    display: none !important;
}

body.games-mode main {
    top: var(--borduresHaut);
    bottom: var(--qayda-safe-bottom);
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
}

body.games-mode #bottom-nav,
body.games-mode #btnWhenPlaying,
body.games-mode #btn-page-guidance,
body.games-mode #book-container,
body.games-mode #dashboard-screen,
body.games-mode #drawing-screen {
    display: none !important;
}

body.drawing-mode main {
    top: var(--borduresHaut);
    bottom: var(--qayda-safe-bottom);
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

body.drawing-mode #bottom-nav,
body.drawing-mode #btnWhenPlaying,
body.drawing-mode #btn-page-guidance,
body.drawing-mode #book-container,
body.drawing-mode #dashboard-screen {
    display: none !important;
}

/* Un petit souffle sous le header, limité aux écrans applicatifs natifs. */
html[data-qayda-platform="android"] body.dashboard-mode #dashboard-screen,
html[data-qayda-platform="android"] body.games-mode #games-screen,
html[data-qayda-platform="android"] body.drawing-mode #drawing-screen {
    margin-block-start: 0.75rem;
}

html[data-qayda-platform="android"] #drawing-new-fab {
    inset-inline-end: max(1rem, calc(var(--qayda-safe-right) + 0.75rem));
    inset-block-end: max(1rem, calc(var(--qayda-safe-bottom) + 0.75rem));
}

body.drawing-mode #topNav > .max:not(#drawing-editor-topbar),
body.drawing-mode #topNav > div:not(#drawing-editor-topbar):not(#drawing-view-control),
body.drawing-mode #topNav > button:not([data-ui="#menuGlobal"]) {
    display: none !important;
}

#drawing-editor-topbar,
#drawing-view-control {
    display: none;
}

body.drawing-mode #drawing-editor-topbar:not(.hide) {
    display: block;
    min-inline-size: 0;
}

body.drawing-mode #drawing-editor-topbar > nav {
    inline-size: 100%;
    min-inline-size: 0;
}

body.drawing-mode #drawing-editor-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.drawing-mode #drawing-view-control:not(.hide) {
    display: inline-flex;
    position: relative;
    z-index: 1600;
}

body.drawing-mode > header {
    position: fixed !important;
    z-index: 1601 !important;
}

body.drawing-mode main {
    z-index: 1;
}

body.drawing-mode #topNav {
    position: relative;
    z-index: 1601;
    overflow: visible !important;
}

/* Le menu d’affichage appartient au header : il passe devant les outils latéraux. */
#drawing-view-menu,
#drawing-opacity-menu {
    z-index: 1600;
}

#drawing-screen {
    inline-size: 100%;
    max-inline-size: min(1100px, calc(100dvw - 1rem));
    max-block-size: 100%;
    margin-inline: auto;
    padding-block-end: 5rem;
    overflow: auto;
}

#drawing-pages-grid article,
#drawing-last-block,
#dashboard-drawing-card {
    cursor: pointer;
}

#drawing-editor-panel {
    position: fixed;
    inset: 4.5rem 0 0;
    overflow: hidden;
}

#drawing-viewport {
    position: absolute;
    inset: 0 0 4.5rem;
    overflow: auto;
    overscroll-behavior: contain;
}

body.drawing-tools-side #drawing-viewport {
    inset: 0 4.5rem 0 0;
}

#drawing-pan-surface {
    position: relative;
    min-inline-size: 100%;
    min-block-size: 100%;
}

#drawing-stage {
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: fit-content;
    max-inline-size: none;
    margin: 0;
    overflow: hidden;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
}

#drawing-background-image {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: calc(100dvw - 1rem);
    max-block-size: calc(100dvh - 4.5rem - 5rem);
    opacity: var(--drawing-background-opacity, 1);
    transition: opacity 0.12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

#drawing-guide-image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: fill;
    opacity: var(--drawing-guide-opacity, 1);
    transition: opacity 0.12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

body.drawing-tools-side #drawing-background-image {
    max-inline-size: calc(100dvw - 5.5rem);
    max-block-size: calc(100dvh - 4.5rem - 1rem);
}

#drawing-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    touch-action: none;
    cursor: crosshair;
}

#drawing-canvas[data-tool="pan"] {
    cursor: grab;
}

#drawing-canvas[data-tool="pan"]:active {
    cursor: grabbing;
}

.drawing-page-preview {
    aspect-ratio: 1323 / 1859;
    object-fit: cover;
    block-size: auto;
    inline-size: 100%;
}

#drawing-toolbar {
    position: absolute;
    /* Au-dessus du canvas, mais sous les menus du header. */
    z-index: 1;
    padding: 0.25rem;
    pointer-events: none;
}

#drawing-toolbar > * {
    pointer-events: auto;
}

#drawing-toolbar.bottom {
    inset: auto 0 0;
    inline-size: 100%;
    border-radius: 0;
    justify-content: space-evenly;
}

#drawing-toolbar.right {
    inset: 0 0 0 auto;
    border-radius: 0;
}

#drawing-toolbar.bottom > * {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
}

#drawing-toolbar.right > * {
    display: flex;
    justify-content: center;
}

#drawing-color-menu {
    min-inline-size: auto;
    gap: 0.25rem !important;
    padding: 0.25rem !important;
}

#drawing-color-menu > li {
    min-block-size: auto;
    padding: 0.125rem !important;
}

#drawing-color-menu > li > button {
    margin: 0;
}

#drawing-guided-actions {
    position: fixed;
    inset-block-start: auto;
    inset-block-end: max(0.5rem, var(--qayda-safe-bottom));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 60;
    inline-size: min(680px, calc(100dvw - 1rem));
    margin: 0;
}

@media (min-width: 900px) {
    .app-content-frame.app-content-frame {
        max-inline-size: min(920px, calc(100dvw - 8rem));
    }
}

#headerInfo
{
        /* background: radial-gradient(circle at 50%, #9D7A08, #806800); */
    /* margin-inline: 4%; */
    /* padding: 20px; */
    /* border-style: dashed; */
    /* border-width: 2px; */
    /* border-color: #f4e6bc; */
    /* border-radius: 40px; */
    outline: 1.5px dashed var(--active); /* #a6810b */
    backdrop-filter: blur(30px);
    outline-offset: -5px;
    border-radius: 15px;
    /* background-image: var(--fondQuadrille); */
}

#page-image, #zones-layer { grid-area: 1 / 1; /* force l'image et le calque de zones à occuper la même cellule. */width: 100%; height: 100%; }
#page-image {
    display: block;
    /* L'image s'adapte pour tenir dans le conteneur */
    max-height: 100%; 
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: var(--fondJaune);
}
/* @media (max-width: 600px) { #book-container, #page-image { max-height: none; width: 100%; } } */

/* @media (max-width: 400px)  {    #page-image {scale: 1.1;    }   } */

/* --- Zones --- */
#zones-layer { position: relative; z-index: 10; }
.zone { position: absolute;  -webkit-tap-highlight-color: transparent; z-index: 20; border-radius: 4px;
/* 1. INDISPENSABLE SUR IOS : */
    /* Sans cursor: pointer, Safari mobile ignore parfois le clic sur une div vide */
    cursor: pointer; 
    
    /* 2. ESTHÉTIQUE IOS : */
    /* Enlève le carré gris semi-transparent qui apparait quand on tape */
    -webkit-tap-highlight-color: transparent;
    
    /* 3. RÉACTIVITÉ : */
    /* Désactive le délai de 300ms (double-tap zoom) pour un clic instantané */
    touch-action: manipulation;
    /* Force la capture des événements */
    pointer-events: auto; 
    transition: background-color 0.1s, box-shadow 0.1s;
 }

/* Active (Lecture en cours) */
/* .zone.active { background-color: rgba(255, 235, 59, 0.5) !important; box-shadow: 0 0 0 3px #FBC02D; z-index: 50; } */


/* On force une couleur plus visible au survol */
@media (hover: hover) {
    .zone:hover {
        background-color: rgb(0 133 255 / 20%) !important; /* Bleu plus marqué */
        border: 1px dashed var(--tertiary);
        z-index: 25; /* Passe légèrement au dessus */
    }
}

/* État actif (lecture) */
.zone.active {
    background-color: rgb(0 255 100 / 10%) !important;
    box-shadow: 0 0 0 3px #FBC02D;
    z-index: 30;
}

.zone.link {
    background-color: rgb(71 255 242 / 5%) !important;
    /* border-style: outset; */
    /* border-color: #00fffe0a; */
    /* z-index: 30; */
}
.zone.url {
    border: thin dashed var(--overlay);
    border-radius: 15px;
}

/* --- NOUVEAU MENU DÉROULANT --- */
/* Permet d'avoir le titre à gauche et le numéro à droite */
.menu-chapter-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

/* Ajustement de la largeur du menu pour qu'il ne soit pas trop étroit */
#dropdown-pages {
    /* min-width: 300px; */
    max-height: calc(100dvh - var(--borduresHautBas)); /* Note : on utilise 100dvh au lieu de 100vh pour éviter les        problèmes avec la barre d'adresse sur mobile (iOS/Android) */
    /* overflow-y: auto; */
    /* min-height: 415px; */
}
/* Style du chapitre actif dans le menu */


@media (max-width: 600px) {
    #topNav {
        max-inline-size: calc(100dvw - 32px);
        box-sizing: border-box;
        overflow: visible;
    }

    #dropdown-pages {
        inline-size: min(17rem, calc(100vw - 2rem)) !important;
        max-inline-size: min(18rem, calc(100vw - 2rem)) !important;
        white-space: normal !important;
    }

    #dropdown-pages li,
    #dropdown-pages li > a,
    #dropdown-pages span {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.35rem;
    }

    #dropdown-pages li > a {
        align-items: flex-start;
    }

    #dashboard-screen > .grid {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }

    #dashboard-screen > .grid > article {
        grid-column: auto;
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    #dashboard-screen > .grid > article.s12 {
        grid-column: 1 / -1;
    }

    .dashboard-continue-layout {
        grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
        min-block-size: 8.5rem;
        gap: 0.75rem;
        padding-inline-end: 0.75rem;
    }

    .dashboard-continue-content {
        padding-block: 0.75rem;
        padding-inline-end: 2.75rem;
        overflow-wrap: anywhere;
    }

    .dashboard-continue-action {
        position: absolute;
        inset-inline-end: 0.5rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
    }

    #dashboard-offline-card nav {
        align-items: center;
    }
}
#dropdown-pages li.fill {    font-weight: bold;}

/* --- STYLES MODE ENSEIGNANT --- */
/* Case sélectionnée par le prof */
.zone.selected {
    background-color: rgba(0, 230, 118, 0.1) !important;
    border: 2px solid #00C853;
    z-index: 40;
}
.zone.selected::after, .zone.reveal-source::after {
    content: 'check'; font-family: 'Material Symbols Outlined';
    position: absolute; top: -10px; right: -10px;
    background: #00C853; color: white; border-radius: 45%;
    font-size: large; padding: 4px;
}
.zone.wrongButYouSaidCorrect::after {
    content: 'block'; font-family: 'Material Symbols Outlined';
    position: absolute; top: -10px; left:-10px;
    background: darkred; color: white; border-radius: 50%;
    font-size: x-large;
  padding: 2px;
}


/* --- STYLES MODE ÉLÈVE --- */
/* Case inactive (non sélectionnée) */
body.restricted-mode .zone:not(.allowed) {
    background-color: rgb(255 255 255 / 80%);
    pointer-events: none; /* Non cliquable */
}
/* Case permise */
body.restricted-mode .zone.allowed {
    background-color: rgba(33, 150, 243, 0.1);
    border: 1px dashed var(--primary);
}

/* --- UI ELEMENTS --- */

/* Bouton Stop Flottant (FAB) */

.desktopDialog {  padding-inline: 25%;    }

#btnWhenPlaying {

    /* bottom: 90px; /* Au dessus de la barre */
    /* left: 50%; */
    /* background-color: var(--error) !important; */
    /* color: white !important; */

   top: calc(var(--borduresHaut) + 0.75rem);
   margin-right: 60px;
    position: absolute;
    transform: translateX(-50%) scale(0); /* Caché par défaut */
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 10;
    
}

#btnWhenPlaying.visible { transform: translateX(-50%) scale(1); }

#pagePrec, #pageSuiv {    /*   font-size: xx-small; */   line-height:0.6em; }

/* Barre outils sélection (Haut) */
#selection-toolbar {
    display: none;
    position: fixed;
    top: var(--borduresHaut);
    left: var(--qayda-safe-left);
    right: var(--qayda-safe-right);
    width: auto;
    min-height: 3.75rem;
    background: var(--background);
    z-index: 1400;
    /* padding: 10px;  */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    justify-content: center; 
    gap: 10px;
    animation: slideDown 0.3s;
}

#selection-toolbar .btnHeaderRestreindre {
    position: static;
}

body.selection-mode main {
    top: calc(var(--borduresHaut) + 3.75rem);
}

@media (max-width: 600px) {
    #selection-toolbar {
        block-size: 3.75rem;
        min-block-size: 3.75rem;
        padding: 0.35rem !important;
        gap: 0.35rem;
    }

    #selection-toolbar > p {
        display: none;
    }

    #selection-toolbar .btnHeaderRestreindre {
        min-inline-size: 0;
        margin: 0 !important;
    }
}


@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Menu page déroulant custom */
.dropdown-menu { 
/* overflow-y: auto; */
 }

/* Mode Enfant */
body.child-mode .nav-btn, body.child-mode header nav button:not(#btn-child-mode):not(#btn-fullscreen),
body.child-mode #btn-settings-trigger { display: none !important; }

#bottom-nav{    background-color: var(--fondBleuUni); overflow: hidden !important;  background-image: var(--fondBleu);     background-blend-mode: color;}

/* --- ANIMATIONS DE NAVIGATION --- */

#page-image {
    transition: transform 110ms ease-out;
    /* On s'assure que l'image est bien positionnée par défaut */
    transform: translateX(0); 
    opacity: 1;
    will-change: transform, opacity;
    
    /* --- BLOQUER LES CLICS / SELECTIONS (Nouveau) --- */
    
    /* 1. Empêche la sélection bleue */
    user-select: none;           
    -webkit-user-select: none;   
    
    /* 2. Empêche le menu "Copier/Enregistrer" sur iPhone/Android (Appui long) */
    -webkit-touch-callout: none; 
    
    /* 3. Empêche de glisser l'image (Fantôme) */
    -webkit-user-drag: none;     
    
    /* 4. L'ARME FATALE : Rend l'image insensible aux clics */
    /* Comme vos zones de clic sont "par dessus" (z-index), ça ne gêne pas l'audio ! */
    pointer-events: none;
}

/* Quand on va vers la page SUIVANTE : l'actuelle part à GAUCHE */
.slide-out-to-left {
    transform: translateX(-12px) !important;
}

/* Quand on va vers la page PRÉCÉDENTE : l'actuelle part à DROITE */
.slide-out-to-right {
    transform: translateX(12px) !important;
}

/* Animation d'entrée (Fade In + léger zoom) */
.page-enter-from-right {
    transform: translateX(12px);
}

.page-enter-from-left {
    transform: translateX(-12px);
}

.page-enter-active {
    transform: translateX(0) !important;
    transition: transform 110ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    #page-image {
        transition: none !important;
    }

    .slide-out-to-left,
    .slide-out-to-right,
    .page-enter-from-right,
    .page-enter-from-left,
    .page-enter-active {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}


/* --- MODE JEU --- */
/* --- EFFET FLASH ÉCRAN (Vert/Rouge) --- */
/* --- EFFET FLASH ÉCRAN (Correction Z-Index) --- */

@media (min-width: 900px)
{
    #btn-replay-game {      margin-right: 25vw; }
    
    #game-overlay header nav {      margin-inline: 20vw;    }
}
/* On crée un calque virtuel par dessus tout le site */
body.flash-success::after,
body.flash-error::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999; /* Au dessus de tout (Main, Header, Nav) */
    pointer-events: none; /* On peut cliquer à travers */
    transition: box-shadow 0.8s ease-in;
}

/* Flash VERT (Lueur diffuse) */
body.flash-success::after {
    /* inset : ombre interne
       0 0 : pas de décalage
       60px : flou (c'est ce qui fait le dégradé long)
       10px : épaisseur de base
    */
    box-shadow: inset 0 0 50px 10px #4CAF50 !important; 
}

/* Flash ROUGE (Lueur diffuse) */
body.flash-error::after {
    box-shadow: inset 0 0 50px 10px #d32f2f !important; 
}

/* L'Overlay qui couvre tout */
.overlay-game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fallback */
    height: 100dvh; /* Mobile modern */
    background: rgba(0,0,0,0.05); /* Très léger voile */
    z-index: 5000; /* Au dessus de tout sauf snackbar */
    pointer-events: none; /* Laisse passer les clics vers les zones ! */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.overlay-game.hide {
    display: none !important;
}

/* Le Header du jeu doit capter les clics par contre */
.overlay-game header {
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    animation: slideDown 0.5s;
}

/* Les contrôles en bas (Vrai/Faux) */
.game-controls {
    pointer-events: auto;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(255,255,255,0.7), transparent);
    gap: 10px;
}

.game-controls.hide {
    display: none !important;
}

.btnHeaderJeu { position: absolute; top: var(--borduresHaut); }
.btnHeaderRestreindre { position: absolute; top: var(--borduresHaut); }
  

.btnH_l { left:0; } .btnH_r { right:0; }
@media (min-width: 900px){   .btnH_l { left:25%; } .btnH_r { right:25%; }      }

#btn-game-continue  {      pointer-events: auto;   }

/* Bouton flottant rejouer */
.floating-game-btn {
    pointer-events: auto;
    position: absolute;
    /* bottom: 30px; */
    /* right: 30px; */
    /* margin: 1rem; */
    z-index: 5001;
}

.floating-game-btn.hide {
    display: none;
}

/* Quand on est en jeu, on peut ajouter un style au curseur */
body.game-mode .zone {
    cursor: crosshair;
}

/* --- MODE JEU OPTIMISÉ --- */

/* 1. Main en plein écran (écrase les marges de la nav) */
body.game-mode main {
    /* bottom: 0 !important; */
    /* right: 0 !important; */
    /* width: 100% !important; */
    /* height: 100vh !important; */
    /* padding: 0 !important; */
    /* margin: 0 !important; */
    
       margin-bottom: calc(var(--borduresHaut)*0.5);
}

/* Le jeu de page garde le header Qayda visible et place ses propres commandes
   juste après, sans recouvrir l'image ni les barres Android. */
html[data-qayda-platform="android"] body.game-mode main {
    top: calc(var(--borduresHaut) + var(--qayda-game-toolbar-height));
    bottom: calc(var(--qayda-game-controls-height) + var(--qayda-safe-bottom));
    margin: 0 !important;
}

html[data-qayda-platform="android"] .overlay-game {
    /* Le header principal reste au premier plan : le jeu occupe uniquement son espace. */
    z-index: 1400;
    block-size: auto;
    inset-block-end: var(--qayda-safe-bottom);
}

html[data-qayda-platform="android"] .overlay-game header {
    margin-block-start: var(--borduresHaut);
    block-size: var(--qayda-game-toolbar-height);
    min-block-size: var(--qayda-game-toolbar-height);
    max-block-size: var(--qayda-game-toolbar-height);
    padding-block: 0;
    /* Une translation ici passe un instant sous le header natif. */
    animation: none;
}

/* Paysage Android : le livre portrait reste large. Les commandes quittent le
   bas et utilisent les marges latérales, tandis que l'énoncé rejoint le header. */
@media (orientation: landscape) and (max-height: 600px) {
    html[data-qayda-platform="android"] body.game-mode > header > #topNav {
        visibility: hidden;
    }

    html[data-qayda-platform="android"] body.game-mode main {
        top: var(--borduresHaut);
        bottom: var(--qayda-safe-bottom);
    }

    html[data-qayda-platform="android"] body.game-mode #btn-page-guidance {
        display: none !important;
    }

    html[data-qayda-platform="android"] .overlay-game {
        z-index: 1600;
        background: transparent;
    }

    html[data-qayda-platform="android"] .overlay-game header {
        margin-block-start: 0;
        block-size: var(--qayda-header-height);
        min-block-size: var(--qayda-header-height);
        max-block-size: var(--qayda-header-height);
        color: var(--on-primary);
        background: transparent !important;
        box-shadow: none;
        pointer-events: none;
    }

    html[data-qayda-platform="android"] #gameHeaderNav {
        block-size: 100%;
        margin: 0;
        padding: 0 5.25rem;
    }

    html[data-qayda-platform="android"] #game-instruction {
        color: inherit;
        font-size: clamp(1rem, 2.4vw, 1.35rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Rail gauche : quitter, score puis réécoute, sans fond opaque. */
    html[data-qayda-platform="android"] .btnHeaderJeu,
    html[data-qayda-platform="android"] #btn-replay-game {
        position: fixed;
        inset-inline-start: 0.5rem;
        inset-inline-end: auto;
        margin: 0;
        color: var(--on-primary);
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto;
    }

    html[data-qayda-platform="android"] .btnHeaderJeu.btnH_l {
        inset-block-start: calc(var(--borduresHaut) + 0.75rem);
    }

    html[data-qayda-platform="android"] .btnHeaderJeu.btnH_r {
        inset-block-start: calc(var(--borduresHaut) + 4.5rem);
        border-color: color-mix(in srgb, var(--on-primary) 55%, transparent);
    }

    html[data-qayda-platform="android"] #btn-replay-game {
        inset-block-start: calc(var(--borduresHaut) + 7.75rem);
        inset-block-end: auto;
        transform: none;
    }

    /* Vrai/faux se place dans le rail droit réservé par la navigation. */
    html[data-qayda-platform="android"] #game-controls-tf {
        position: fixed;
        inset-inline-start: auto;
        inset-inline-end: 0.75rem;
        inset-block-start: calc(var(--borduresHaut) + 0.75rem);
        inset-block-end: auto;
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0.75rem;
        background: transparent;
        pointer-events: auto;
    }

    html[data-qayda-platform="android"] #game-controls-tf > .max {
        display: none;
    }

    html[data-qayda-platform="android"] #game-controls-tf > button {
        min-inline-size: 3.5rem;
        min-block-size: 3.5rem;
        margin: 0 !important;
        padding: 0;
        border-radius: 50%;
    }

    html[data-qayda-platform="android"] #game-controls-tf > button span {
        display: none;
    }

    html[data-qayda-platform="android"] #btn-game-continue {
        position: fixed;
        inset-inline-end: 0.75rem;
        inset-inline-start: auto;
        inset-block-end: 0.75rem;
        margin: 0;
        transform: none;
        pointer-events: auto;
    }
}

body.game-mode #page-image {
    /* margin-bottom: 70px;    /* Pour les boutons de jeux du bas */ 
    
}
body.game-mode #book-container {
       margin-right: initial;
    
}

/* 2. Feedback Visuel Fort (Opacité max) */
.zone.correct {
    background-color: rgba(76, 175, 80, 0.3) !important; /* Vert fort */
    border: 3px solid #2E7D32 !important;
    box-shadow: 0 0 15px #4CAF50;
    z-index: 100;
}
.zone.correctButYouSaidWrong {
    /* background-color: rgba(0, 150, 255, 0.5) !important;*/ /* Vert fort */ 
    /* border: 3px solid #2E7D32 !important; */
    box-shadow: 0 0 15px blue;
    z-index: 100;
}

.zone.wrongButYouSaidCorrect {
    background-color: rgb(255 0 154 / 30%) !important;
    border: 2px dotted purple;
}
.zone.wrong {
    background-color: rgba(255, 100, 100, 0.1) !important; /* Rouge fort */ 
    border: 3px solid #C62828 !important;
    box-shadow: 0 0 15px darkred;
    z-index: 100;
}

.zone.thisIsFalse
{   
     background-color: #8080801f;
    box-shadow: 0 0 5px black;
}

.zone.propositionJeu {
    
    /* background-color: rgb(182 223 255 / 4%) !important; */
    box-shadow: 0 0 10px 5px #9ac2ff;
    outline: 4px solid var(--primary);
    z-index: 30;
}

/* Animation de clic (Ripple effect instantané) */
.zone.clicked {
    background-color: rgba(255, 193, 7, 0.3) !important;
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* Erreurs de fin de jeu */
.zone.error-red { 
    /* border: 4px solid #f44336 !important;  */
    outline: 2px solid #580600;
    /* background: rgba(244, 67, 54, 0.2) !important;  */
    background: rgb(255 25 0 / 20%) !important;
    box-shadow: 0 0 4px 4px #606060ba;
}

/* 3. Modal de fin de jeu (BeerCSS custom) */
#modal-game-end {
    text-align: center;       width: 90%;    max-width: 520px;
}
#modal-game-end i.large {
    /* --_size: 4rem; */
    /* margin-bottom: 1rem; */
}


/* Animation pour faire clignoter la bonne réponse pendant la pause */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Cas 1 : C'était VRAI (mais j'ai dit Faux) */
.zone.missed-truth {
   outline: 2px solid #4CAF50 !important;
    animation: pulse-green 0.7s infinite;
    z-index: 101;
}

/* Cas 2 : C'était FAUX (j'ai dit Vrai), voici la VRAIE SOURCE */
.zone.reveal-source {
    background-color: rgba(33, 150, 243, 0.2) !important; /* Fond Bleu pour différencier */
    outline: 3px groove #2196F3 !important;
    animation: pulse-green 2s infinite;
    z-index: 101;
}


/* --- CORRECTIF MOBILE BEERCSS --- */
@media (pointer: coarse) {
    /* 1. On ÉCRASE la règle de BeerCSS pour empêcher l'ouverture au touch/hover */
    :not(menu,[data-ui]):hover > menu.closeOnTouch {
        opacity: 0 !important;
        visibility: hidden !important;
       /*  transform: scale(0.9) !important; */ /* On remet l'état fermé */
        pointer-events: none !important; /* Empêche les clics accidentels */
    }

    /* 2. On définit une règle pour ouvrir le menu QUAND MÊME, mais via JS */
    /* BeerCSS utilise souvent .active sur le parent pour ouvrir */
    :not(menu,[data-ui]) > menu.closeOnTouch.active,
    :not(menu,[data-ui]):focus-within > menu.closeOnTouch.active { 
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) translateY(100%) !important;
        pointer-events: auto !important;
    }
}

    
    /* /////////////////////////////// NEW JUILLET 2026 ////////////////////////////////// */
    #page-guidance-body {   
        font-size: large;
    }
    
    #onboarding-image   {
        max-width: 400px;
    width: max-content;
    max-height: 200px;
    }
    
    /* /////////////////////////////// NEW JUILLET 2026 ////////////////////////////////// */
@font-face {
    font-family: "QaydaGameArabic";
    src: url("../fonts/arabic-tracing/AlQuran-IndoPak-by-QuranWBW.v.4.2.2.ttf") format("truetype");
    font-display: swap;
}

/* Plateau autonome des jeux globaux : au-dessus du lecteur, sous les dialogs BeerCSS. */
/* Réserve la place du footer fixe pour que les dernières touches restent accessibles. */
#global-game-shell {
    --global-game-footer-clearance: calc(4.5rem + var(--qayda-safe-bottom));
    z-index: 20;
    overflow: auto;
    box-sizing: border-box;
    padding-block-end: var(--global-game-footer-clearance);
    scroll-padding-block-end: var(--global-game-footer-clearance);
}
#global-game-main { padding-bottom: max(1rem, var(--qayda-safe-bottom)); }
#global-game-target { min-height: 5rem; max-width: 100%; font-family: var(--qayda-game-arabic-font, "QaydaGameArabic"), serif; font-size: var(--global-target-size, 4rem); line-height: 1.55; overflow: hidden; }
#global-game-target-card { max-width: 52rem; margin-inline: auto; cursor: pointer; }
#global-game-target-audio-hint { opacity: 0.75; }
#global-game-answer { min-height: 7rem; font-family: var(--qayda-game-arabic-font, "QaydaGameArabic"), serif; font-size: 5rem; line-height: 1.3; }
#global-game-response-row { max-width: 52rem; margin-inline: auto; }
#global-game-keyboard { grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); max-width: 52rem; margin-inline: auto; }
.global-game-letter-glyph { font-family: var(--qayda-game-arabic-font, "QaydaGameArabic"), serif; font-size: 2.5rem; line-height: 1; }
#global-game-diacritics { max-width: 52rem; margin-inline: auto; justify-content: center; }
#global-game-diacritics.hide { display: none !important; }
#global-game-diacritics .grouped { margin: 0; }
#global-game-diacritics button { flex: 0 0 auto; margin: 0; }
.global-game-diacritic-glyph { display: inline-block; min-width: 2.8rem; font-family: var(--qayda-game-arabic-font, "QaydaGameArabic"), serif; font-size: 3rem; line-height: 1; text-align: center; }
.global-game-sign-choice { min-height: 2.75rem; padding-inline: 0.5rem; }
.global-game-sign-choice .global-game-diacritic-glyph { min-width: auto; font-size: 1.5rem; }
.global-game-sign-name { font-size: 0.72rem; line-height: 1; }
#game-question-feedback { max-width: 42rem; margin-inline: auto; }
.global-game-character-correct,
.global-game-character-error { display: inline-block; margin-inline: 0.08em; border-radius: 0.35rem; padding-inline: 0.12em; }
.global-game-character-space { display: inline-block; min-width: 0.45em; }
.global-game-review-text { font-family: var(--qayda-game-arabic-font, "QaydaGameArabic"), serif; font-size: 3rem; line-height: 1.6; text-align: center; }
.global-game-review-answer nav { direction: ltr; }
/* Le plateau global défile : son footer doit rester ancré au viewport. */
#global-game-footer {
    position: fixed !important;
    inset-inline: var(--qayda-safe-left) var(--qayda-safe-right);
    inset-block-start: auto !important;
    inset-block-end: var(--qayda-safe-bottom);
    z-index: 30;
}
.game-history-inline-detail { cursor: default; }
.game-history-error-review article { margin-block: 0.5rem; }
body.global-game-mode #topNav { display: none; }

@media (max-width: 600px) {
    #global-game-target { font-size: min(var(--global-target-size, 4rem), 2.65rem); }
    #global-game-answer { min-height: 5rem; font-size: 3rem; }
    .global-game-review-text { font-size: 2.15rem; }
}

/* Sur ordinateur et en paysage, le modèle et la réponse partagent la largeur. */
@media (min-width: 601px), (orientation: landscape) {
    #global-game-response-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: stretch;
    }

    #global-game-target-card,
    #global-game-answer {
        inline-size: 100%;
        margin: 0;
    }
}