(retiré : le pied de page collé en bas du viewport sur une page courte laissait un grand vide au-dessus, jugé pire que le pied de page qui remonte juste après le contenu — retour explicite de l'utilisateur). Le flex column reste utile pour le width:100% ci-dessous, voir son commentaire. */ display: flex; flex-direction: column; align-items: stretch; /* Dégradé linéaire haut-droite -> bas-gauche, gardé en commentaire pour pouvoir revenir en arrière d'un coup : background: linear-gradient(to bottom left, #8b36df 0%, #8b36df 100%); */ color: var(--ink); font-family: var(--font-body); line-height: 1.6; } /* Fond sur un calque séparé (pas le background de body directement), même principe qu'avant (position:fixed = jamais déformé ni coupé sur une page longue, le contenu défile par-dessus sans bouger le fond). Redesign (branche "redesign" uniquement) : demandé explicitement — plus d'image aquarelle, un violet foncé uni avec juste un très léger dégradé concentré en bas, pour matcher le fond des cartes "screen" du mockup validé (mêmes deux teintes que .attendance-session-modal-card). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #6a3fc9 0%, #6a3fc9 65%, #7d4fd6 100%); } /* Sélecteurs génériques (pas des classes) : chaque page a un header/main/ footer en enfants directs de — un seul point d'entretien plutôt qu'une règle par page/par classe (.admin-main, .prestations-main...). "width: 100%" sur les trois est CRUCIAL, pas juste ceinture-bretelles : quasiment tous les conteneurs de page (.site-header, .admin-main, .prestations-main, .auth-main...) se centrent avec "max-width + margin: 0 auto". Dans un flex container, des marges horizontales auto sur un enfant annulent le stretch de align-items (l'enfant revient à la largeur de son contenu au lieu de remplir l'espace, avant même que son propre max-width n'entre en jeu) — repéré via une vraie capture d'écran headless après le passage de body en flex column pour le footer collant, qui a cassé TOUT ce centrage sans qu'aucune classe individuelle n'ait été touchée. Forcer width:100% ici contourne ce piège pour de bon : la largeur n'est plus "auto", donc le stretch flex n'a plus son mot à dire, et le max-width + margin:auto de chaque page reprend son comportement normal par-dessus. */ body > header, body > main, body > footer { width: 100%; } #snow-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Flou déplacé ici (composité une fois par frame par le GPU) plutôt que via ctx.filter dans snow.js (recalculé à la main pour chacun des flocons à chaque frame) — bien moins coûteux, corrige le ralentissement perçu introduit par le flou. */ filter: blur(2px); } .site-header { max-width: 720px; margin: 0 auto; /* padding-top réduit : n'a plus besoin de réserver de la place sous un nav flottant (voir .top-nav, passé en position:sticky ci-dessus) — la barre réserve maintenant son propre espace toute seule. */ padding: 2.5rem 1.5rem 2.5rem; text-align: center; } .eyebrow { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; font-weight: 600; font-style: italic; /* Halo flou collé aux lettres (pas un panneau derrière tout le bloc) pour rester lisible par-dessus le fond image, quelle que soit la zone de l'image derrière. */ text-shadow: 0 0 6px rgba(61, 20, 102, 0.55), 0 0 14px rgba(61, 20, 102, 0.35); } .site-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.01em; color: #40EAE8; /* Halo désactivé pour test (comparaison avec .toc-label) : text-shadow: 0 0 10px rgba(255, 255, 255, 0.322), 0 0 22px rgba(255, 255, 255, 0.55); */ } .tagline { margin: 0.9rem 0 0; color: #ffffff; font-size: 1.05rem; } main { max-width: 720px; margin: 0 auto; padding: 0 1.5rem 4rem; } /* Même "boîte vitre" que .about-text/.prestation-text/.faq-item, demandée explicitement pour ce texte aussi. */ .welcome { text-align: center; color: #ffffff; margin: 0 auto 2.75rem; max-width: 620px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem 1.75rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .welcome p { margin: 0 auto; max-width: 52ch; } .toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); } .toc-item { border-bottom: 1px solid var(--paper-line); } .toc-item a { display: flex; /* "baseline" convenait au chiffre texte d'origine, mais désaligne les nouvelles icônes .toc-index (image) par rapport au label — chaque icône ayant sa propre marge interne (halo/étincelles), un centrage vertical simple est plus cohérent visuellement d'une ligne à l'autre. */ align-items: center; gap: 1.25rem; padding: 1.15rem 0.25rem; text-decoration: none; color: var(--ink); position: relative; transition: padding-left 0.2s ease, color 0.2s ease; } .toc-item a:hover, .toc-item a:focus-visible { padding-left: 0.6rem; color: #40EAE8; } .toc-item a::after { content: "→"; margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; color: var(--cyan); } .toc-item a:hover::after, .toc-item a:focus-visible::after { opacity: 1; transform: translateX(0); } /* Même badge plein que "Mon espace"/"Thoát" */ .toc-index { width: 2rem; height: 2rem; flex-shrink: 0; object-fit: contain; transition: transform 0.15s ease; } /* Balancement continu + pop au survol — même traitement "vivant" que .flashcard-sway/.flashcard-flip-btn, demandé explicitement par Lily après le passage des chiffres en rose ("un peu d'animation comme les flashcards"), puis amplifié ("je veux que ça bouge bien") : rotation plus large + pulsation de taille, rythme plus rapide. Désynchronisé par item (durée/délai propres à chacun) pour que les 7 chiffres ne se balancent pas au même rythme. */ @keyframes toc-index-sway { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } } .toc-index { animation: toc-index-sway 1.9s ease-in-out infinite; transform-origin: 50% 85%; } .toc-list .toc-item:nth-child(2) .toc-index { animation-duration: 2.15s; animation-delay: -0.7s; } .toc-list .toc-item:nth-child(3) .toc-index { animation-duration: 1.7s; animation-delay: -1.3s; } .toc-list .toc-item:nth-child(4) .toc-index { animation-duration: 2.0s; animation-delay: -0.35s; } .toc-list .toc-item:nth-child(5) .toc-index { animation-duration: 1.8s; animation-delay: -1.05s; } .toc-list .toc-item:nth-child(6) .toc-index { animation-duration: 2.05s; animation-delay: -1.6s; } .toc-list .toc-item:nth-child(7) .toc-index { animation-duration: 1.75s; animation-delay: -0.95s; } .toc-item a:hover .toc-index, .toc-item a:focus-visible .toc-index { animation: none; transform: scale(1.22) rotate(-6deg); } .toc-text { display: flex; flex-direction: column; gap: 0.15rem; } /* Pastille "Nouveau" à côté d'un lien du menu d'accueil (voir "Les petits +") — demandé pour "sauter un peu aux yeux" sans être agressif : rose de la DA (plus visible que .tab-badge-new, pensée discrète pour un onglet interne) avec une pulsation douce et continue plutôt qu'un clignotement. */ @keyframes toc-badge-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 98, 155, 0.5); } 50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(224, 98, 155, 0); } } .toc-badge-new { display: inline-block; margin-left: 0.5rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--gold); color: #fff; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; animation: toc-badge-pulse 2.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .toc-badge-new { animation: none; } } /* var(--accent-dark) (violet) était pensé pour l'ancien fond aquarelle plus clair — devenu quasi illisible sur le nouveau fond violet uni (contraste trop faible entre deux violets proches), remonté explicitement ("dur à lire"). Cyan, comme le reste des accents du redesign. */ .toc-label { font-family: var(--font-display); font-size: 1.08rem; font-weight: bold; color: var(--cyan); transition: color 0.2s ease; } .toc-item a:hover .toc-label, .toc-item a:focus-visible .toc-label { color: #ffffff; } .toc-desc { font-size: 0.88rem; color: #ffffff; } .toc-item--locked .toc-label { display: inline-flex; align-items: center; gap: 0.4rem; } .lock { width: 1.275rem; height: 1.275rem; vertical-align: -0.25rem; opacity: 0.7; } .site-footer { text-align: center; padding: 2rem 1.5rem 3rem; color: #ffffff; font-size: 0.85rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toc-item a, .toc-item a::after, .toc-index { transition: none; } .toc-index { animation: none; } } @media (max-width: 480px) { .toc-item a { gap: 0.9rem; } .toc-item a::after { display: none; } } /* --- Page d'inscription --- */ .tagline a { color: #ffffff; } .auth-main { max-width: 420px; margin: 0 auto; padding: 0 1.5rem 4rem; } .google-btn-wrapper { display: flex; justify-content: center; min-height: 44px; } .divider { display: flex; align-items: center; text-align: center; color: #FFFFFF; font-size: 0.85rem; margin: 1.75rem 0; } .divider::before, .divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--paper-line); } .divider span { padding: 0 0.9rem; } .auth-form { display: flex; flex-direction: column; } .auth-form[hidden] { display: none; } .auth-form label { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem; margin-top: 1rem; /* Pas de carte sur ces pages (connexion, mot de passe oublié, réinitialisation) — directement sur le fond, il faut donc sa propre couleur plutôt que d'hériter du noir par défaut du site. */ color: #40EAE8; } .auth-form input { font-family: var(--font-body); font-size: 1rem; padding: 0.65rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; background: #fff; color: var(--ink); } .auth-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .field-hint { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--ink-soft); } .schedule-current-status { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: #f2ecfb; color: var(--accent-dark); font-size: 0.95rem; font-weight: 600; text-shadow: 0 1px 0 #fff; } /* Éditeur de description de cours : mise en forme minimale (gras/surligné/ barré), rendu en texte classique du site — pas de police/taille au choix, contrairement aux blocs de fiche (voir sheet-editor-architecture). */ .rich-text-toolbar { display: flex; gap: 0.4rem; margin: 0.5rem 0; } .rich-text-btn { width: 32px; height: 32px; font-family: var(--font-body); font-size: 0.85rem; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--ink); cursor: pointer; } .rich-text-btn:hover { border-color: var(--accent); } .rich-text-btn.rich-text-btn--active { border-color: var(--accent); background: #f2ecfb; } .rich-text-editor { min-height: 8rem; padding: 0.65rem 0.85rem; border: 1px solid var(--paper-line); border-radius: 6px; background: #fff; } .rich-text-editor:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Couleur de surlignage thématique (violet/rose du site) plutôt que le jaune vif par défaut du navigateur, qui jurerait avec la palette. */ .rich-text-editor mark, .student-list-desc mark { background: #f6d8ea; color: var(--ink); border-radius: 2px; } /* Bouton d'action principal repris du mockup validé : pastille cyan, texte foncé (meilleur contraste sur cyan qu'un texte blanc) — remplace l'ancien rectangle violet plein, gardé nulle part ailleurs pour rester cohérent. */ .btn-primary { margin-top: 1.6rem; padding: 0.75rem 1.3rem; border: none; border-radius: 999px; background: var(--cyan); color: #133b3a; font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .btn-primary:hover { background: #6ff4f2; } .btn-primary:active { transform: scale(0.98); } .form-message { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; } .form-message--error { color: #b3261e; } .form-message--success { color: var(--accent-dark); } /* Texte secondaire (messages d'état vide type "Aucune séance programmée pour l'instant.", indications de champ type "Choisis ce qui te prévient ...") — .form-message/.access-list-empty/.field-hint utilisent tous var(--ink-soft), un gris-violet pensé pour un fond blanc (modales) — illisible posé directement sur le fond violet du redesign, remonté explicitement ("les textes en gris sont dur à lire"). Scopé à .admin-panel (le conteneur commun à TOUS les onglets Cours/Examens/ Inscriptions/Utilisateurs/Mes cours/Mes examens/Présences/Mes informations — jamais les modales, qui restent en dehors de .admin-panel dans le DOM et gardent donc leur gris d'origine, toujours correct sur fond blanc). :not() pour ne jamais repasser par-dessus une erreur/succès (qui gardent leurs couleurs propres). */ .admin-panel .form-message:not(.form-message--error):not(.form-message--success), .admin-panel .access-list-empty, .admin-panel .field-hint { color: var(--glass-ink-soft); } .tabs { display: flex; border-bottom: 1px solid var(--glass-border); margin-bottom: 0.5rem; } /* Reprend le mockup : onglets inactifs en blanc discret, l'actif bascule en cyan + soulignement cyan (inversé par rapport à l'ancien blanc-actif/ cyan-inactif, mais c'est exactement ce que montrent les captures validées). */ .tab { flex: 1; padding: 0.6rem 0; background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--glass-ink-soft); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .tab--active { color: var(--cyan); border-bottom-color: var(--cyan); } .tab:hover { color: var(--cyan); } /* Sur mobile, 8 onglets en flex:1 se compressent au point de se chevaucher (signalé sur téléphone le 25/08/2026) — on bascule en défilement horizontal, chaque onglet gardant sa largeur naturelle. */ @media (max-width: 760px) { .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .tab { flex: 0 0 auto; white-space: nowrap; padding: 0.6rem 0.9rem; } } /* Pastille "Nouveau" à côté d'un onglet fraîchement ajouté (voir #tab-attendance) — même patron que .student-list-badge, en blanc translucide plutôt que rose pour rester discret à côté du libellé. */ .tab-badge-new { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--glass-ink); font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } /* --- Onglet "Accès" (plan "Onglet Accès", option B "vue partagée" validée le 21/08/2026, voir admin-access-overview.js) : liste compacte à gauche, détail de l'élément sélectionné à droite — posé directement sur le fond violet de .admin-panel, donc en tokens "verre" comme le reste du chrome applicatif (jamais --paper/--ink, réservés au contenu "papier"). Même patron flex-qui-se-empile-sous-640px que .user-profile-access-columns. --- */ .access-overview { display: flex; gap: 1.25rem; align-items: flex-start; } @media (max-width: 760px) { .access-overview { flex-direction: column; } } .access-overview-list-col { width: 280px; flex-shrink: 0; } @media (max-width: 760px) { .access-overview-list-col { width: 100%; } } .access-overview-search { display: block; width: 100%; font-family: var(--font-body); font-size: 0.9rem; padding: 0.55rem 0.75rem; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg-strong); color: var(--glass-ink); margin-bottom: 0.75rem; } .access-overview-search::placeholder { color: var(--glass-ink-soft); } .access-overview-list { max-height: 480px; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .access-overview-group-label { margin: 0; padding: 0.6rem 0.9rem 0.3rem; font-family: var(--font-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--glass-ink-soft); } .access-overview-list-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.65rem 0.9rem; background: none; border: none; border-top: 1px solid var(--glass-border); color: var(--glass-ink); font-family: var(--font-body); font-size: 0.85rem; text-align: left; cursor: pointer; } .access-overview-group-label + .access-overview-list-item, .access-overview-list:first-child > .access-overview-list-item:first-child { border-top: none; } .access-overview-list-item:hover { background: var(--glass-bg-strong); } .access-overview-list-item--active { background: var(--glass-bg-strong); box-shadow: inset 2px 0 0 var(--cyan); } .access-overview-list-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cyan); font-family: var(--font-display); font-weight: 600; } .access-overview-list-item-count { flex-shrink: 0; background: var(--glass-bg-strong); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.72rem; color: var(--glass-ink-soft); } .access-overview-list-item--active .access-overview-list-item-count { color: var(--cyan); } .access-overview-detail { flex: 1; min-width: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.25rem 1.5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .access-overview-detail-empty { margin: 0; color: var(--glass-ink-soft); } .access-overview-detail-title { font-size: 1.2rem; color: var(--cyan); } .access-overview-detail-sub { margin: 0.2rem 0 1.25rem; font-size: 0.85rem; color: var(--glass-ink-soft); } .access-overview-detail-group + .access-overview-detail-group { margin-top: 1.1rem; } .access-overview-detail-group-label { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--glass-ink-soft); } .access-overview-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .access-overview-chip { display: flex; align-items: center; gap: 0.35rem; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 999px; padding: 0.25rem 0.65rem 0.25rem 0.25rem; font-size: 0.8rem; color: var(--glass-ink); } .access-overview-chip .user-avatar-small { margin-right: 0; } /* Chip "VIP" (cours extra en dehors du site) : fond tranchant pour repérer ces élèves d'un coup d'œil dans l'onglet Accès. */ .access-overview-chip--vip { background: var(--rose); border-color: var(--rose); color: var(--ink); } .access-overview-vip-filter { display: inline-flex; margin: 0.75rem 0; color: var(--glass-ink, #fff); } .access-overview-manage-btn { margin-top: 1.25rem; } /* --- Barre de navigation en haut à droite (lien connexion) --- */ /* Barre pleine largeur, collante en haut (position:sticky réserve un vrai espace dans le flux, contrairement à l'ancien position:fixed qui flottait par-dessus le contenu) : plus jamais de contenu qui passe "derrière" le nav sur petit écran, même si son contenu passe sur 2 lignes (flex-wrap) — la barre grandit simplement, elle ne peut plus rien recouvrir. Fond légèrement teinté + flou pour rester lisible par-dessus le contenu qui défile en dessous une fois qu'on a scrollé. */ .top-nav { position: sticky; top: 0; z-index: 10; width: 100%; padding: 0.9rem 1.5rem; /* Blanc translucide plutôt qu'une teinte violette plate : avec le nouveau fond en dégradé "mesh" (voir body ci-dessus), une couleur plate ici créait une bande nette là où elle rencontre le dégradé qui varie en dessous. Le blanc très translucide + flou laisse transparaître le dégradé du dessous ("verre dépoli") au lieu de le couper. */ background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* flex + align-items:center : alignement vertical fiable de l'avatar par rapport au texte, plutôt que de dépendre de vertical-align en flux inline (c'est ce qui faisait apparaître l'icône "à un endroit bizarre"). */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0; } /* Réseaux sociaux, à gauche de la barre (le reste — connexion/compte — reste à droite grâce à justify-content:space-between ci-dessus). */ /* Bandeau d'annonce défilant (25/08/2026), voir public/js/site-banner.js — inséré juste après .site-header sur les pages qui incluent ce script. */ /* .sheet-title-input force "display: block", ce qui écrase l'attribut [hidden] sur ce champ (même bug de spécificité que .vitrine-preview-overlay avec le pop-up flashcards, 25/08/2026) — sans ça il reste visible même caché. */ #banner-link-url-input[hidden] { display: none; } /* Même piège [hidden]/.sheet-title-input que #banner-link-url-input ci-dessus, sur le champ "type de mot personnalisé" de la modale flashcards. */ #flashcard-word-type-custom-input[hidden] { display: none; } .site-banner-ticker { display: block; overflow: hidden; background: #FFD4F7; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--glass-border); padding: 0.5rem 0; text-decoration: none; } .site-banner-ticker-track { display: flex; width: max-content; animation: site-banner-scroll linear infinite; } .site-banner-ticker-track span { flex-shrink: 0; padding: 0 3rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: #7D09E4; white-space: nowrap; } @keyframes site-banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .site-banner-ticker-track { animation: none; overflow-x: auto; } } .social-icons { display: flex; align-items: center; gap: 0.9rem; } .social-icons-label { font-size: 0.78rem; font-weight: 700; color: var(--cyan); white-space: nowrap; } .social-icon { display: flex; color: var(--accent-dark); /* utilisé par l'icône mail (fill="currentColor"), les logos Insta/Facebook/Threads ont leurs propres couleurs de marque */ border-bottom: none !important; /* .top-nav a met un soulignement au survol, pas voulu ici */ transition: opacity 0.15s ease; } .social-icon svg { width: 19px; height: 19px; } .social-icon:hover, .social-icon:focus-visible { opacity: 0.7; } /* --- Cloche de notifications (item 11), insérée par notifications-widget.js dans #top-nav-account --- */ .notif-bell-wrapper { position: relative; display: inline-flex; align-items: center; margin-right: 0.6rem; } .notif-bell-btn { position: relative; background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.3rem; display: inline-flex; align-items: center; } .notif-bell-icon { width: 1.65rem; height: 1.65rem; display: block; } .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center; } .notif-dropdown[hidden], .notif-badge[hidden] { display: none; } .notif-dropdown { position: absolute; top: 130%; right: 0; width: 300px; max-width: 85vw; max-height: 380px; overflow-y: auto; background: #fff; border-radius: 10px; box-shadow: 0 20px 50px rgba(44, 31, 69, 0.28); text-align: left; z-index: 50; } /* Sur téléphone en portrait, .top-nav passe souvent sur 2 lignes (voir flex-wrap sur .top-nav) et la cloche se retrouve alors collée au bord gauche — le "right: 0" ci-dessus ancré sur .notif-bell-wrapper fait alors déborder tout le menu hors de l'écran vers la gauche (signalé sur téléphone le 25/08/2026). En dessous de 640px, on ancre au VIEWPORT plutôt qu'à la cloche : reste visible peu importe où elle atterrit. */ @media (max-width: 640px) { .notif-dropdown { position: fixed; top: 6.5rem; left: 0.75rem; right: 0.75rem; width: auto; max-width: none; } } .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--paper-line); font-weight: 600; color: var(--ink); font-size: 0.85rem; } .notif-mark-all-btn { background: none; border: none; color: var(--accent-dark); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0; } .notif-list { list-style: none; margin: 0; padding: 0; } .notif-item { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--paper-line); cursor: pointer; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--paper); } .notif-item--unread { background: #f6d8ea33; position: relative; } .notif-item--unread .notif-item-title { font-weight: 700; } .notif-item-title { margin: 0 0 0.15rem; font-size: 0.85rem; color: var(--ink); } .notif-item-date { margin: 0; font-size: 0.72rem; color: var(--ink-soft); } .notif-list-empty { padding: 1rem 0.85rem; text-align: center; color: var(--ink-soft); font-size: 0.85rem; } /* --- Préférences de notifications (globales, site/email), écran "Mes informations" de cours.html --- */ .notif-prefs-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; } .notif-pref-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink); cursor: pointer; } .notif-pref-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-dark); cursor: pointer; } /* --- Coupure de notif pour UN cours/examen précis (vues détail élève) --- */ /* var(--ink-soft) (gris-violet) illisible sur le fond violet du redesign — toujours utilisée sur des pages élève (jamais dans une modale blanche), donc changée directement plutôt que scopée. */ .notif-mute-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.75rem; font-size: 0.82rem; color: var(--glass-ink-soft); cursor: pointer; } .notif-mute-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cyan); cursor: pointer; } /* --- Ligne titre + coupure de notif (vues détail cours/examen élève) : le titre garde sa police/taille habituelle (.admin-subtitle), la case passe sur la même ligne, tout à droite. --- */ .detail-header-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; } .detail-header-row .admin-subtitle { margin: 0; flex: 1; min-width: 200px; } .detail-header-row .notif-mute-toggle { margin: 0; flex-shrink: 0; } /* Chronomètre d'examen (voir student-courses-exams.js) : visible en permanence dans l'en-tête de la vue "passage d'examen" (une seule question affichée à la fois par le pager, donc pas besoin de sticky pour rester visible en scrollant). Passe en rouge dans la dernière minute. */ .exam-take-timer { flex-shrink: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--accent-dark); color: #fff; } .exam-take-timer--low { background: #e0455f; } .top-nav a { font-size: 0.85rem; font-weight: 600; color: #40EAE8; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .top-nav a:hover, .top-nav a:focus-visible { border-bottom-color: var(--accent-dark); } .top-nav-greeting { font-size: 0.85rem; color: #ffffff; margin-right: 0.35rem; } /* "Mon espace" en rose brillant, seul lien du nav à ressortir ainsi — Repensé en petit bouton plein (texte noir sur fond turquoise rectangulaire) plutôt qu'un texte qui brille — demandé explicitement, l'ancien glow rose n'aurait plus de sens sur un fond plein. Sélecteur "a.top-nav-space-link" (pas juste ".top-nav-space-link") : nécessaire pour battre ".top-nav a" en spécificité (classe+élément bat une seule classe, peu importe l'ordre dans le fichier) — sinon la couleur turquoise de base gagnait quand même. */ a.top-nav-space-link { color: #0b1a1a; background: var(--cyan); font-weight: 700; text-decoration: none; padding: 0.2rem 0.6rem; border-radius: 6px; white-space: nowrap; } /* Même spécificité que .top-nav a:hover (classe+pseudo-classe+élément) — gagne par ordre de déclaration (plus bas dans le fichier) : sans ça, le soulignement générique du nav réapparaîtrait sous ce badge plein, ce qui n'a pas de sens visuellement. */ a.top-nav-space-link:hover, a.top-nav-space-link:focus-visible { border-bottom-color: transparent; } .top-nav-sep { font-size: 0.85rem; color: var(--paper-line); margin-right: 0.5rem; } /* Même badge plein que "Mon espace" (a.top-nav-space-link) — demandé explicitement, même traitement. */ #logout-link { font-size: 0.85rem; font-weight: 700; color: #0b1a1a; background: var(--cyan); text-decoration: none; padding: 0.2rem 0.6rem; border-radius: 6px; white-space: nowrap; } /* Sans ça, le soulignement générique de .top-nav a:hover (border-bottom-color, propriété non redéfinie ci-dessus) réapparaîtrait sous ce badge plein. */ #logout-link:hover, #logout-link:focus-visible { border-bottom-color: transparent; } /* --- Page admin --- */ .admin-main { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; } /* --- Template de cours "Livre" (voir student-courses-exams.js openSheetView) : la fiche prend toute la largeur, juste l'en-tête du site au-dessus (pas dans .admin-main, donc inchangé sans rien faire de spécial ici). Classe posée/retirée dynamiquement sur .admin-main, jamais dans le HTML statique. --- */ .admin-main--book { max-width: none; padding: 0 0.75rem 4rem; } .admin-panel { padding-top: 1.5rem; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .admin-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #40EAE8; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--paper-line); } .admin-table td button + button { margin-left: 0.5rem; } .admin-table td { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--paper-line); color: #ffffff; } /* Badge "cours extra en dehors du site" (24/08/2026) : repère visuel dans la liste Utilisateurs, purement informatif — voir setUserExternalCourses. */ .user-external-courses-badge { display: inline-block; margin-left: 0.4rem; font-size: 1.15rem; vertical-align: text-bottom; } .user-external-courses-filter { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; font-size: 0.9rem; cursor: pointer; } .user-external-courses-filter select { font-family: var(--font-body); font-size: 0.88rem; padding: 0.3rem 0.5rem; border: 1px solid var(--paper-line); border-radius: 5px; background: var(--cyan); color: var(--ink); } /* Ligne "VIP" (cours extra en dehors du site) : fond tranchant pour repérer ces utilisateurs d'un coup d'œil dans la liste. */ .user-row--vip { background: var(--rose); } .user-row--vip td { color: var(--ink); } /* Boutons "Profil"/"Supprimer" pensés pour un fond violet foncé (verre clair sur foncé) : sur le fond rose clair des lignes VIP ils devenaient illisibles, on leur donne des couleurs adaptées à un fond clair. */ .user-row--vip .btn-secondary { background: #fff; border-color: var(--ink); color: var(--ink); } .user-row--vip .btn-secondary:hover { background: var(--paper-line, #f0f0f0); } .user-row--vip .btn-delete { background: #fff; border-color: #d6336c; color: #d6336c; } .user-row--vip .btn-delete:hover { background: #d6336c; color: #fff; } .role-select { font-family: var(--font-body); font-size: 0.88rem; padding: 0.35rem 0.5rem; border: 1px solid var(--paper-line); border-radius: 5px; background: var(--cyan); color: var(--ink); } .admin-placeholder { color: #ffffff; text-align: center; padding: 2rem 0; } .btn-delete { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.8rem; border: 1.5px solid var(--pill-danger-ink); border-radius: 999px; background: var(--pill-danger-bg); color: var(--pill-danger-ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .btn-delete:hover { background: var(--pill-danger-ink); color: #3a0d1f; } /* --- Gestion des cours / fiches --- */ .admin-subtitle { font-family: var(--font-display); font-size: 1.4rem; color: #40EAE8; margin: 0.5rem 0 0; } .admin-toolbar { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; } /* Même piège [hidden]/display:flex que .chat-panel/.book-field-panel ailleurs dans ce fichier : sans ça, [hidden] reste sans effet sur .admin-toolbar (ex: #my-exam-book-take-submit-row visible malgré son attribut hidden). */ .admin-toolbar[hidden] { display: none; } /* --- Navigation "une question à la fois" (examens + exercices de fiche, voir question-pager.js) --- */ .question-pager-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1.25rem 0; } .question-pager-counter { font-size: 0.9rem; font-weight: 600; color: #ffffff; } .btn-small { margin-top: 0; padding: 0.55rem 0.9rem; font-size: 0.88rem; } /* Souligne uniquement les liens/boutons "Quay lại" (jamais "Về trang chủ", qui partage pourtant le même wrapper .tagline) — classe dédiée plutôt qu'un sélecteur par texte (impossible en CSS). */ .link-underline { text-decoration: underline; } .btn-link { display: inline-block; background: none; border: none; padding: 0; margin-bottom: 1rem; color: #40EAE8; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; } /* Bouton secondaire "verre" : contour translucide plutôt qu'un rectangle blanc plein, pour rester dans le même registre que .student-list-item — remplit légèrement au survol au lieu de s'inverser complètement. */ .btn-secondary { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.8rem; border: 1.5px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); color: var(--glass-ink); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .btn-secondary:hover { background: var(--glass-bg-strong); border-color: var(--cyan); } .simple-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); } .simple-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--paper-line); color: #ffffff; } /* .simple-list est partagée avec les panneaux admin directement sur le fond dégradé (blanc y est correct) — la modale "Voir les soumissions" d'un élève est maintenant une carte "verre" comme le reste du redesign (voir .user-submissions-modal-card plus bas), donc le blanc de base redevient correct ici aussi ; plus besoin de l'ancien override sombre posé quand cette modale était encore une carte blanche. */ .item-actions { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; } /* --- Pastille "copies en attente de correction", devant le nom d'un cours/ fiche/examen (même rouge que .chat-badge/.notif-badge, cohérence site-wide pour "quelque chose demande ton attention") --- */ .pending-correction-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 0.45rem; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 700; vertical-align: middle; } /* --- Fil d'ariane des sous-catégories de cours --- */ .category-breadcrumb { margin: 0.5rem 0 1rem; font-size: 0.9rem; } .category-breadcrumb-item { color: #ffffff; text-decoration: none; font-weight: 600; } a.category-breadcrumb-item:hover, a.category-breadcrumb-item:focus-visible { text-decoration: underline; } .category-breadcrumb-sep { color: var(--paper-line); margin: 0 0.15rem; } /* --- Sous-catégorie dans la liste des fiches (façon dossier) --- */ .category-list-item span:first-child { font-weight: 700; } .sheet-move-select { max-width: 220px; } .sheet-title-input { display: block; width: 100%; font-family: var(--font-body); font-size: 1.05rem; padding: 0.6rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; margin: 0.5rem 0 1.25rem; background: #fff; color: var(--ink); } /* Popup natif de "Cours lié" ( ne pouvant pas avoir d'enfant, l'icône est un élément séparé positionné par-dessus, avec pointer-events:none pour laisser le clic traverser jusqu'à l'input réel en-dessous. */ .annotation-color-input-wrap { position: relative; display: inline-flex; } .annotation-color-input-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)); } .annotation-width-group { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-soft); } .annotation-width-input { width: 90px; accent-color: var(--accent-dark); } .annotation-toolbar-btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; } .annotation-draw-toggle--on { border-color: var(--accent-dark); color: var(--accent-dark); } /* Gomme active (23/08/2026, voir canvas-annotation.js buildAnnotationToolbar) — fond plein plutôt qu'un simple changement de bordure/texte comme .annotation-draw-toggle--on ci-dessus : demandé explicitement pour que le mode actif se voie plus clairement (un bouton parmi d'autres au look très proche sinon). */ .annotation-eraser-toggle--active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } /* Pastille montrant la zone effacée par la gomme, visible seulement pendant qu'on appuie (voir showEraserCursor/hideEraserCursor dans canvas-annotation.js). Centrée sur le point exact via translate, comme un trait à bouts ronds (lineCap "round"). */ .annotation-eraser-cursor { position: absolute; border-radius: 50%; border: 2px solid var(--accent-dark); background: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%); pointer-events: none; z-index: 5; } /* --- Pages "Livre" : l'image de la page + des champs à position libre (voir public/js/admin-book-page.js, public/js/student-book-page.js). Le PDF EST le contenu, pas de "boîte" autour — juste un conteneur relatif pour ancrer l'image + les champs + le calque de dessin. --- */ #book-page-canvas-wrap, #my-book-page-wrap, #book-correction-canvas-wrap, #book-exam-canvas-wrap, #book-exam-correction-canvas-wrap, #my-exam-book-take-wrap { position: relative; width: 100%; } /* Mode "placement" du prochain champ (voir admin-book-page.js, startPlacingBookField, et admin-book-exam.js) : curseur en croix pour indiquer que le prochain clic pose le champ à cet endroit précis. */ #book-page-canvas-wrap.book-page-canvas-wrap--placing, #book-exam-canvas-wrap.book-page-canvas-wrap--placing { cursor: crosshair; } /* Aperçu en direct pendant le clique-glisse qui dessine un nouveau champ (voir admin-book-page.js, onMove dans le pointerdown de placement). */ .book-field-draw-preview { position: absolute; border: 2px dashed var(--accent-dark); background: rgba(125, 9, 228, 0.1); border-radius: 4px; pointer-events: none; } /* Pile de pages empilées (voir migration_add_book_multi_page.sql) : chaque page = une image pleine largeur, l'une sous l'autre en flux normal — c'est ce qui donne à #book-page-canvas-wrap (position:relative) sa hauteur totale, dont dépendent les positions en % des champs posés dessus. Léger espace entre deux pages (accepté explicitement : "quitte à ce qu'il y ait une légère séparation naturelle entre les pages") plutôt qu'un vrai visuel de coupure — juste assez pour distinguer une page de la suivante au scroll. */ .book-page-stack-image { display: block; width: 100%; height: auto; margin-bottom: 6px; } .book-page-stack-item { position: relative; } .book-page-stack-item .book-field-delete { top: 4px; right: 4px; } .book-field { position: absolute; box-sizing: border-box; } .book-field:not(.book-field--readonly) { border: 1.5px dashed rgba(124, 58, 237, 0.6); background: rgba(255, 255, 255, 0.55); border-radius: 4px; } /* Zone à souligner : couleur distincte de la zone de texte (même forme de rectangle vide sinon, confusion possible en édition — voir aussi le badge .book-field-type-label ci-dessous). */ .book-field--draw_zone:not(.book-field--readonly) { border-color: rgba(224, 98, 155, 0.75); /* var(--gold) */ background: rgba(255, 245, 250, 0.6); } /* Zone "Fichier audio" : pas de cadre pointillé ni de fond — juste le bouton (éditeur) ou le lecteur (élève/correction), tel quel, sans boîte visible autour (remonté explicitement : la boîte gênait côté élève et décalait le lecteur de sa position réelle). Taille ignorée côté rendu (posW/posH restent enregistrés mais inertes ici) : le lecteur audio a sa propre taille native, on ne la force plus — seule la position (left/top) compte, ce qui la rend enfin précise au pixel près plutôt qu'approximée par une boîte qui ne correspondait pas à la taille réelle du contrôle. .book-field--readonly (correction admin) garde son padding, pas de raison de la retirer là où il n'y a pas de fond à masquer. */ .book-field--audio:not(.book-field--readonly) { border: none; background: none; width: auto !important; height: auto !important; } /* Badge texte dans le coin d'un champ, éditeur admin uniquement (jamais montré à l'élève) — voir buildBookFieldElement, BOOK_FIELD_EDITOR_BADGE. */ .book-field-type-label { position: absolute; top: 2px; left: 4px; font-size: 0.6rem; font-family: var(--font-body); color: var(--ink-soft); opacity: 0.75; pointer-events: none; white-space: nowrap; } .book-field--readonly { display: block; } /* Les zones de texte (réponse libre) sont peintes APRÈS (donc au-dessus de) le calque de dessin dans l'ordre du DOM (#book-exam-correction-fields vient après #book-exam-correction-images dans admin.html) — sans ça, le clic est capté par le texte (sélection) au lieu du canvas en-dessous, empêchant justement de dessiner dans la seule zone où on veut l'autoriser (voir isPointAllowed dans canvas-annotation.js). On laisse le clic traverser jusqu'au canvas ; les boutons +/- de zoom (au-dessus, cf. .book-field-zoom-ctrl) restent cliquables via leur propre pointer-events. Pas touché pour case à cocher/zone à souligner/audio : elles ont besoin de rester interactives (lecteur audio) ou gèrent déjà leur propre dessin (zone à souligner). */ .book-field--readonly:not(.book-field--checkbox):not(.book-field--draw_zone):not(.book-field--audio) { pointer-events: none; /* Discret rappel visuel de la zone où le dessin de correction est autorisé (voir isPointAllowed dans canvas-annotation.js) — sans ça, rien ne distingue une zone de texte du reste de la page, la prof ne pouvait que deviner où le trait allait "accrocher". */ border: 1px dashed rgba(124, 58, 237, 0.35); border-radius: 4px; /* Les zones "à trou" (un mot) sont souvent placées minuscules dans l'éditeur — bien assez pour la saisie élève, illisible en correction. On agrandit donc le plancher ici (correction uniquement, jamais l'éditeur ni la vue élève) pour que le texte de réponse reste lisible même dans une boîte d'origine étroite ; le +/- par boîte reste dispo au-delà. */ min-width: 2.6rem; min-height: 1.7rem; } /* Texte de la réponse en correction, séparé de .book-field--readonly pour laisser la place à .book-field-zoom-ctrl (boutons +/- collés à la boîte, demandé explicitement plutôt qu'un réglage global) sans qu'il écrase le textContent à chaque re-rendu. */ .book-field-answer-text { position: relative; /* ancre .book-field-word-count en filigrane, voir plus bas */ width: 100%; height: 100%; overflow: auto; font-family: var(--font-body); font-size: 1.1rem; color: var(--ink); white-space: pre-wrap; padding: 0.2rem 0.25rem; box-sizing: border-box; /* Fond légèrement opaque pour que le texte reste lisible par-dessus une page scannée chargée (lignes, images) — demandé après relecture d'une copie où le texte se fondait dans le fond. */ background: rgba(255, 255, 255, 0.75); border-radius: 3px; } .book-field-zoom-ctrl { position: absolute; top: -0.6rem; right: -0.6rem; display: flex; gap: 2px; z-index: 2; pointer-events: auto; } /* Compteur de mots des zones de texte "Livre" (examens + fiches), côté prof uniquement — en filigrane par-dessus le texte (ancré à .book-field-answer-text, voir position:relative ci-dessus) plutôt que dans le flux : sur les toutes petites boîtes ("1 mot") le badge en flux forçait à lui seul un rétrécissement de la police (voir fitBookFieldFontSize), pour un gain de lisibilité nul. En absolu il ne compte plus dans le calcul de hauteur. */ .book-field-word-count { position: absolute; right: 0.15rem; bottom: 0.05rem; font-size: 0.65rem; font-weight: 600; color: var(--accent-dark, #7c3aed); opacity: 0.55; pointer-events: none; background: rgba(255, 255, 255, 0.6); border-radius: 2px; padding: 0 2px; line-height: 1.3; } .book-field-zoom-btn { width: 1.1rem; height: 1.1rem; line-height: 1; padding: 0; border: 1px solid var(--accent-dark, #7c3aed); border-radius: 50%; background: #fff; color: var(--accent-dark, #7c3aed); font-size: 0.7rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; } .book-field-zoom-btn:hover { background: var(--accent-dark, #7c3aed); color: #fff; } .book-field-input { width: 100%; height: 100%; border: none; outline: none; resize: none; overflow: hidden; /* Safari ignore resize:none seul et garde son coin de redimensionnement natif */ background: none; font-family: var(--font-body); font-size: 1.15rem; color: var(--ink); padding: 0.2rem 0.25rem; } /* Une case à cocher n'a pas besoin du padding pensé pour le texte (voir .book-field-input ci-dessus) — en le gardant, la case native rendait plus petite que sa boîte et décalée selon le navigateur (padding sur un se comporte de façon incohérente d'un moteur à l'autre). accent-color aligne aussi sa couleur sur le violet du site plutôt que le bleu par défaut du navigateur. */ .book-field--checkbox .book-field-input { cursor: pointer; display: block; padding: 0; margin: 0; accent-color: var(--accent-dark); } /* Filigrane prof "bonne réponse" (voir admin-book-page.js buildBookAnswerFieldElement) : masque léger posé par-dessus la case, jamais interactif (pointer-events: none) et jamais envoyé à l'élève. */ .book-field-checkbox-watermark { position: absolute; inset: -3px; border-radius: 4px; background: rgba(125, 9, 228, 0.18); outline: 1.5px dashed rgba(125, 9, 228, 0.55); outline-offset: 1px; pointer-events: none; } /* "Zone à caractères limités" : rappel de la réponse attendue en vue de correction prof (voir buildBookAnswerFieldElement), même esprit discret que le filigrane des cases à cocher ci-dessus. */ .book-field-restricted-expected { font-size: 0.7rem; color: #1a9c5c; margin-top: 0.15rem; } .book-field-delete { position: absolute; top: -0.6rem; right: -0.6rem; width: 18px; height: 18px; border-radius: 50%; border: none; background: #b3261e; color: #fff; font-size: 0.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .book-field-resize-handle { position: absolute; bottom: -4px; right: -4px; width: 10px; height: 10px; background: var(--accent-dark); border-radius: 2px; cursor: nwse-resize; } /* Zone "Fichier audio" (voir buildBookFieldElement, admin-book-page.js) : bouton pour lier/changer le fichier + mini lecteur de test, tous deux compacts pour tenir dans une petite zone. */ .book-field-audio-link-btn { border: 1px solid var(--accent-dark); border-radius: 6px; background: #fff; cursor: pointer; color: var(--accent-dark); font-size: 0.75rem; padding: 0.3rem 0.6rem; white-space: nowrap; } .book-field-audio-link-player { display: block; } /* Transcription écrite d'un audio : saisie dans l'éditeur de fiche (voir .book-field-audio-transcript-input plus bas), lecture seule + repliable en vue de correction prof uniquement (voir admin-book-page.js buildAudioTranscriptControl) — le champ audio lui-même est minuscule (juste l'icône + le lecteur), donc ce bloc déborde volontairement par-dessus le reste de la page au besoin. */ .book-field-transcript-wrap { position: relative; z-index: 5; margin-top: 0.3rem; } .book-field-transcript-toggle { border: 1px solid rgba(125, 9, 228, 0.4); background: #fff; color: var(--accent-dark); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.75rem; white-space: nowrap; cursor: pointer; } .book-field-transcript-panel { position: absolute; top: 100%; left: 0; margin-top: 0.25rem; width: 280px; max-width: 60vw; background: #fff; border: 1px solid rgba(125, 9, 228, 0.35); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); padding: 0.5rem; font-size: 0.8rem; white-space: pre-wrap; } /* Saisie de la transcription dans l'éditeur (buildBookFieldElement, champ audio) — sous le bouton/lecteur, toujours visible en édition. */ .book-field-audio-transcript-label { display: block; margin-top: 0.3rem; font-size: 0.7rem; color: #666; } .book-field-audio-transcript-input { display: block; width: 220px; min-height: 60px; resize: vertical; font: inherit; font-size: 0.78rem; border: 1px solid #ddd; border-radius: 6px; padding: 0.35rem; margin-top: 0.2rem; box-sizing: border-box; } .book-field-audio-link-btn:disabled { opacity: 0.5; cursor: default; } /* Nombre d'écoutes max (examens "Livre" uniquement, voir migration_add_exam_audio_max_plays.sql) — champ compact posé sous le bouton "Choisir un fichier" dans admin-book-exam.js. */ .book-field-audio-maxplays-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--ink-soft); } .book-field-audio-maxplays-input { width: 4rem; padding: 0.15rem 0.3rem; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.75rem; } /* Groupe de cases exclusives + réponse attendue (voir migration_add_book_checkbox_grouping.sql), admin-book-exam.js et admin-book-page.js : la boîte d'une case est minuscule par défaut (24x24px, voir BOOK_EXAM_FIELD_DEFAULT_SIZE_PX), ces contrôles débordent donc volontairement en dessous plutôt que de forcer la case à s'agrandir. */ .book-field-checkbox-controls { position: absolute; top: 100%; left: 0; margin-top: 2px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--border-color, #ddd); border-radius: 4px; padding: 3px 5px; z-index: 2; white-space: nowrap; } .book-field-checkbox-group-label, .book-field-checkbox-correct-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; color: var(--ink-soft); } .book-field-checkbox-group-input { width: 4.5rem; padding: 0.1rem 0.25rem; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.7rem; } .book-field-checkbox-correct-select { padding: 0.1rem 0.2rem; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.7rem; } /* Indicateur cliquable de réponse attendue (remplace le select "Attendu", voir buildBookExamFieldElement) — occupe toute la case (24x24px par défaut) pour rester visible même minuscule, sans déborder comme .book-field-checkbox-controls. */ .book-field-checkbox-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: bold; line-height: 1; cursor: pointer; pointer-events: none; border-radius: 3px; } .book-field-checkbox-mark--checked { color: #1a9c5c; background: rgba(26, 156, 92, 0.25); } .book-field-checkbox-mark--unchecked { color: #d13c3c; background: rgba(209, 60, 60, 0.2); } /* "Revoir ma copie" côté élève (voir student-book-exam.js buildBookExamFieldElement) : colore la case elle-même plutôt qu'une icône à côté, pour rester lisible même sur une case minuscule (quelques px de large sur une page scannée). La bonne réponse est toujours en vert (cochée ou non, pour montrer ce qu'il fallait répondre) ; une case cochée à tort passe en rouge — jamais les deux classes en même temps sur une case. */ .book-field-checkbox--correct-answer { outline: 2px solid #1a9c5c; outline-offset: 1px; background: rgba(26, 156, 92, 0.55) !important; border-radius: 3px; } .book-field-checkbox--wrong { outline: 2px solid #d13c3c; outline-offset: 1px; background: rgba(209, 60, 60, 0.55) !important; border-radius: 3px; } /* "Bonne réponse : X" sous une zone à caractères limités ratée (voir restrictedAnswerReveal, student-book-page.js/student-book-exam.js) — positionné sous le champ plutôt que dedans (souvent trop petit pour du texte en plus de la réponse de l'élève), pastille blanche pour rester lisible par-dessus l'image scannée. */ .book-field-restricted-answer-reveal { position: absolute; top: 100%; left: 0; margin-top: 0.2rem; padding: 0.1rem 0.35rem; background: #ffffff; color: #1a9c5c; font-size: 0.7rem; font-weight: 600; white-space: nowrap; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 5; } /* Lecteur audio restreint côté élève (student-book-exam.js) : juste un bouton, pas de