/* =============================
   INTERACTION
============================= */
:root {
    --ZML-base: 60px;
    --ZMR-base: 60px;

    /* variables dynamiques utilisées par tout le layout */
    --ZML-width: var(--ZML-base); /* largeur infranchissable gauche */
    --ZMR-width: var(--ZMR-base); /* largeur infranchissable droite */

    --ZH-height: 60px;            /* hauteur infranchissable en haut */
    --ZF-height: 40px;            /* hauteur infranchissable en bas */

    --ZS-width: 0px;              /* obligatoire pour calc() */
}

#Layout {
    position: relative;
    width: 100%; /* ← essentiel */
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   FONDS OPAQUES POUR TOUTES LES ZONES FIXES ET LE CONTENU
   ⚠️ CORRIGÉ : white → var(--cd-bg)
============================================================ */
#ZML,
#ZMR,
#ZH,
#ZF,
#ZMH,
#ZS,
#ZC {
    background: var(--cd-bg);
}

/* ============================================================
   FONDS VISIBLES POUR DÉBUG (inchangé)
   (Tu peux les enlever ou les garder)
============================================================ */
/*
body {
    background: rgb(255,230,230);
}
#ZML { background-color: #ffb3b3 !important; }
#ZMR { background-color: #b3b3ff !important; }
#ZH  { background-color: #b3ffb3 !important; }
#ZMH { background-color: #ffd699 !important; }
#ZS  { background-color: #e5b3e5 !important; }
#ZC  { background: #ffffb3 !important; }
#ZF  { background-color: #b3ffff !important; }
*/
/* ==========================
   ZONES FIXES GAUCHE / DROITE
========================== */
#ZML {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ZML-width);
    padding: 10px; /* Horizontal */
    z-index: 2000;
    box-sizing: border-box;
}

#ZMR {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--ZMR-width);
    padding: 10px;
    z-index: 2000;
    box-sizing: border-box;
}

#ZML, #ZMR {
    padding: 0 !important;
    border: none !important;
}

/* =============================
   ZH — HEADER FIXE
============================= */
#ZH {
    position: fixed;
    top: 0;
    left: var(--ZML-width);
    right: var(--ZMR-width);
    height: var(--ZH-height);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    padding: 0 10px;
    white-space: nowrap;

    z-index: 3000;
    box-sizing: border-box;
}

/* Espace flexible */
#ZH .spacer { flex-grow: 1; }

/* Menus desktop */
#ZH .header-icons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* Hamburger mobile */
#ZH .hamburger {
    display: none;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
}

#ZH .hamburger span {
    width: 22px;
    height: 2px;
    background: var(--cd-text);
    display: block;
}

/* ==========================
   ZF — FOOTER FIXE
========================== */
#ZF {
    position: fixed;
    bottom: 0;
    left: var(--ZML-width);     /* marge ZML dynamique */
    right: var(--ZMR-width);    /* marge ZMR dynamique */
    height: var(--ZF-height);   /* marge ZH  dynamique */
    padding: 10px;
    z-index: 3000;
    box-sizing: border-box;
}

/* ==========================
   ZMH — MENU MOBILE (FIXE)
========================== */
#ZMH {
    position: fixed;
    top: var(--ZH-height);
    left: var(--ZML-width);
    right: var(--ZMR-width);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: var(--cd-bg);

    z-index: 2500;
    padding: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#ZMH.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

#ZMH a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
#ZMH a:last-child {
    border-bottom: none;
}

/* MENU HAMBURGER — ciblage précis */
#ZMH.side-menu a {
    padding: 10px 12px;
    margin: 6px 10px;

    border-radius: 10px;

    background: var(--cd-btn-bg);
    border: 1px solid var(--cd-btn-border);

    color: var(--cd-btn-fg);
    text-decoration: none;
    font-weight: 600;

    display: block; /* important ici pour le rendu bouton */
}

/* hover */
#ZMH.side-menu a:hover {
    background: var(--cd-btn-bg-hover);
}

/* ==========================
   ZC — CONTENU CENTRAL
========================== */
#ZC {
    position: absolute;
    top: var(--ZH-height);
    left: var(--ZML-width);
    right: var(--ZMR-width);

    padding-right: var(--ZMR-width);
    padding-bottom: calc(var(--ZF-height) + 10px);

    min-width: 0;
    overflow-wrap: break-word;

    padding-left: 10px;
    padding-right: 10px;

    box-sizing: border-box;
}

#ZC, #ZC .content {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

#ZC .content {
    padding-bottom: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}



/* ==========================
   ZS — SIDEBAR FIXE À DROITE
========================== */
#ZS {
    position: fixed;
    top: var(--ZH-height) !important;
    bottom: var(--ZF-height) !important;
    right: var(--ZMR-width);

    width: max-content;
    max-width: calc(100vw - var(--ZML-width) - var(--ZMR-width));

    overflow-y: auto;
    overflow-x: hidden;

    padding: 10px;
    background: var(--cd-bg);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sidebar cachée par défaut */
#ZS.sidebar--collapsed { display: none; }

#ZS .font-btn,
#ZS a {
    display: block;
    margin-bottom: 8px;
}

/* Normalisation */
#ZS * { white-space: nowrap; }

#ZS img {
    width: 20px;
    height: 20px;
}

#ZS > * {
    width: 100%;
    margin: 0; /* Supprime le margin générique sur tous les enfants */
    text-align: center;
}

/* ==========================
   RESPONSIVE
========================== */
.desktop-only { display: inline; } /* garantit 1 seule ligne */

@media (max-width: 760px) {
    .desktop-only { display: none !important; }
    #ZH .hamburger { display: flex !important; }

    #ZML, #ZMR { display: none !important; }

    :root {
        --ZML-width: 0px;
        --ZMR-width: 0px;
    }

    [data-action="tts-pause"] {
        display: none !important;
    }
}

@media (min-width: 761px) {
    #ZMH { display: none !important; }
    #ZML, #ZMR { display: block !important; }

    :root {
        --ZML-width: var(--ZML-base);
        --ZMR-width: var(--ZMR-base);
    }
}

/* Cacher l’option "Curseur agrandi" sur téléphone et tablette */
@media (max-width: 900px) {
    label.cd-checkbox input[data-value="cursor"] {
        display: none !important;
    }
    label.cd-checkbox input[data-value="cursor"] + .cb-box,
    label.cd-checkbox input[data-value="cursor"] ~ .cb-label {
        display: none !important;
    }
}