/**
 * Leçons de sons — styles
 *
 * Chargé uniquement sur les pages qui portent une carte de mot, par
 * inc/sons-lecon.php. Deux choses seulement :
 *   1. le décalage d'en-tête sur mobile, repris du script de quatre pages
 *   2. le repère visuel des lettres muettes
 *
 * @package JeRevise
 */

/* --------------------------------------------------------------------------
 * 1. Décalage d'en-tête sur mobile
 *
 * Reprend à l'identique ce que faisait fixHeaderOverlap() dans le champ
 * « scripts de pied de page » de quatre leçons : marge de 150 px sur le titre,
 * 20 px de doublure, 100 px sur l'en-tête, en dessous de 768 px de large.
 *
 * Le script posait ces valeurs en style en ligne au chargement et au
 * redimensionnement, mais ne les RETIRAIT jamais : une fenêtre élargie après
 * coup gardait les marges mobiles. La media query, elle, se défait toute seule.
 *
 * Portée limitée aux quatre pages qui l'avaient, par leur identifiant : rien ne
 * dit que les vingt-quatre autres leçons en ont besoin, et les élargir serait
 * un changement d'apparence non demandé.
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .postid-2061 .entry-title,
    .postid-2073 .entry-title,
    .postid-2095 .entry-title,
    .postid-2106 .entry-title {
        margin-top: 150px;
        padding-top: 20px;
    }
    .postid-2061 .entry-header,
    .postid-2073 .entry-header,
    .postid-2095 .entry-header,
    .postid-2106 .entry-header {
        padding-top: 100px;
    }
}

/* --------------------------------------------------------------------------
 * 2. Lettre muette
 *
 * Posée par sons-lecon.js pendant une seconde et demie quand on clique sur une
 * lettre qui ne se prononce pas — le g de « sang », le t de « chat ». La voix
 * dit « muette » ; ceci le montre, pour l'enfant qui n'écoute pas.
 *
 * Aucun élément ne peut encore recevoir cette classe : les graphèmes ne sont
 * pas cliquables aujourd'hui. Le style est posé d'avance pour que le jour où
 * ils le deviendront, rien ne manque.
 * -------------------------------------------------------------------------- */
.lettre-muette {
    outline: 2px dashed #2c5282;
    outline-offset: 2px;
    position: relative;
}

.lettre-muette::after {
    content: "muette";
    position: absolute;
    top: -0.9em;
    right: 0;
    background: #2c5282;
    color: #fff;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 0 6px;
    border-radius: 2px;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .lettre-muette { transition: none; }
}