(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; } /* Image de fond sur un calque séparé (pas le background de body directement) : nécessaire pour pouvoir la faire pivoter à 180° sans tourner le contenu réel de la page avec (un transform sur body tournerait tout le site). position:fixed = jamais déformée ni coupée sur une page longue, le contenu défile par-dessus sans bouger l'image. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-color: #b9a8e8; background-image: url("../images/bg-watercolor6.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* 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; } .welcome { text-align: center; color: #ffffff; margin-bottom: 2.75rem; } .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; align-items: baseline; 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:hover .toc-index, .toc-item a:focus-visible .toc-index { color: #FFFFFF; } .toc-item a::after { content: "→"; margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; color: var(--accent); } .toc-item a:hover::after, .toc-item a:focus-visible::after { opacity: 1; transform: translateX(0); } .toc-index { font-family: var(--font-display); font-size: 1.1rem; color: #FFFFFF; min-width: 2ch; transition: color 0.2s ease; } .toc-text { display: flex; flex-direction: column; gap: 0.15rem; } .toc-label { font-family: var(--font-display); font-size: 1.08rem; color: #40EAE8; 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 { font-size: 0.85rem; 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; } } @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; } .btn-primary { margin-top: 1.6rem; padding: 0.75rem 1rem; border: none; border-radius: 6px; background: var(--accent-dark); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s ease; } .btn-primary:hover { background: var(--accent); } .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); } /* Messages d'état vide ("Aucune inscription pour l'instant.", "Aucune fiche pour l'instant dans ce cours.", etc.) dans Cours/Examens/Inscriptions — :not() pour ne jamais repasser par-dessus une erreur/succès (qui gardent leurs couleurs propres ci-dessus). */ #panel-courses .form-message:not(.form-message--error):not(.form-message--success), #panel-exams .form-message:not(.form-message--error):not(.form-message--success), #panel-registrations .form-message:not(.form-message--error):not(.form-message--success), #panel-my-courses .form-message:not(.form-message--error):not(.form-message--success), #panel-my-exams .form-message:not(.form-message--error):not(.form-message--success) { color: #ffffff; } .tabs { display: flex; border-bottom: 1px solid var(--paper-line); margin-bottom: 0.5rem; } .tab { flex: 1; padding: 0.6rem 0; background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: #40EAE8; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .tab--active { color: #ffffff; border-bottom-color: var(--accent-dark); } .tab:hover { color: #40EAE8; } /* --- 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). */ .social-icons { display: flex; align-items: center; gap: 0.9rem; } .social-icons-label { font-size: 0.78rem; color: #ffffff; 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; } .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; } .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) --- */ .notif-mute-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.75rem; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; } .notif-mute-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-dark); 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; } .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; } .top-nav-sep { font-size: 0.85rem; color: var(--paper-line); margin-right: 0.5rem; } #logout-link { font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } #logout-link:hover { border-bottom-color: var(--accent-dark); } /* --- Page admin --- */ .admin-main { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 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; } .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: #fff; color: var(--ink); } .admin-placeholder { color: #ffffff; text-align: center; padding: 2rem 0; } .btn-delete { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.65rem; border: 1px solid #b3261e; border-radius: 5px; background: #fff; color: #b3261e; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .btn-delete:hover { background: #b3261e; color: #fff; } /* --- 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; } /* --- 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; } .btn-secondary { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.65rem; border: 1px solid var(--accent-dark); border-radius: 5px; background: #fff; color: var(--accent-dark); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .btn-secondary:hover { background: var(--accent-dark); color: #fff; } .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 une carte blanche (.modal-card), donc scope dédié ici. */ #user-submissions-modal .simple-list li { color: var(--accent-dark); } .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); } /* --- Éditeur de fiche en grille libre (gridstack.js) --- */ .sheet-blocks-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.25rem; } /* Cadre "page" : une vraie feuille blanche posée sur le fond crème du site, avec de la marge tout autour, pour que la zone d'édition se distingue nettement du reste de la page admin au lieu de s'y fondre. */ .sheet-page-frame { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.14), 0 2px 8px rgba(44, 31, 69, 0.07); padding: 2.5rem 2rem; margin: 0.5rem 0 1.5rem; } #sheet-grid { /* Hauteur de départ généreuse (~une vraie page), pas juste la place d'un bloc */ min-height: 720px; /* Quadrillage qui rend la grille magnétique visible pendant l'édition */ background-image: linear-gradient(rgba(91, 44, 150, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 44, 150, 0.18) 1px, transparent 1px); background-size: 28px 30px; background-position: -1px -1px; } /* Les poignées se positionnent via des variables CSS que GridStack calcule lui-même (--gs-item-margin-*), et qui semblent partir n'importe où pour un bloc avec beaucoup d'espace de grille vide en dessous (notre cas : tous nos blocs de test ont une grande zone vide sous eux) — d'où le décalage "fou" observé en bas. On fige ces variables à 0 pour un positionnement fiable, collé pile aux bords du bloc, quoi que GridStack calcule par ailleurs. */ .grid-stack-item { --gs-item-margin-top: 0px !important; --gs-item-margin-right: 0px !important; --gs-item-margin-bottom: 0px !important; --gs-item-margin-left: 0px !important; } /* Poignées de redimensionnement GridStack : par défaut, une icône flèche diagonale assez massive à chaque coin. On la remplace par un petit carré neutre centré dans chaque poignée (coin ou bord) — la zone cliquable d'origine ne change pas, seul son rendu devient plus discret ("à la Paint" : juste de petites accroches, le reste du cadre sert à déplacer). Ces poignées sont des enfants directs de ".grid-stack-item" (pas de ".sheet-tile"/".grid-stack-item-content", qui n'est qu'un frère) : le sélecteur doit cibler ce parent-là pour matcher quoi que ce soit. */ .grid-stack-item > .ui-resizable-handle { background-image: none !important; } .grid-stack-item > .ui-resizable-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px; background: #fff; border: 1px solid var(--ink-soft); } /* Les poignées de coin sont elles-mêmes tournées à 45° par GridStack (pour orienter son icône d'origine) : sans ça, notre carré hérite de cette rotation et devient un losange. On la neutralise en sens inverse. */ .grid-stack-item > .ui-resizable-nw::after, .grid-stack-item > .ui-resizable-se::after { transform: rotate(45deg); } .grid-stack-item > .ui-resizable-ne::after, .grid-stack-item > .ui-resizable-sw::after { transform: rotate(-45deg); } /* Les poignées de coin de GridStack font 20x20px par défaut : bien plus gros que le petit carré qu'on y dessine, et surtout ça mange une bonne partie du pourtour du bloc, qui doit rester libre pour le déplacer (voir le padding de .sheet-tile-body ci-dessous). On les réduit à 12px. */ .grid-stack-item > .ui-resizable-nw, .grid-stack-item > .ui-resizable-ne, .grid-stack-item > .ui-resizable-se, .grid-stack-item > .ui-resizable-sw { width: 12px !important; height: 12px !important; } /* Par défaut ces poignées de bord s'étirent sur (quasi) toute la longueur du bord (ex : "n"/"s" ne laissent que 25px de marge de chaque côté) — donc en pratique, tout le pourtour du bloc redimensionne, et il ne reste presque plus rien pour l'attraper et le déplacer (repéré à l'usage : au doigt sur tablette, quasi impossible d'éviter de tomber dedans). On les réduit à une petite zone centrée sur chaque bord, alignée avec le petit carré qu'on y dessine — le reste du pourtour redevient disponible pour déplacer. */ .grid-stack-item > .ui-resizable-n, .grid-stack-item > .ui-resizable-s { height: 8px !important; left: calc(50% - 15px) !important; right: calc(50% - 15px) !important; } .grid-stack-item > .ui-resizable-e, .grid-stack-item > .ui-resizable-w { width: 8px !important; top: calc(50% - 15px) !important; bottom: calc(50% - 15px) !important; } .sheet-tile { position: relative; height: 100%; background: #fff; /* Cadre pointillé, sans ombre ni coin arrondi : un bloc "à la Paint", le plus dépouillé possible, plutôt qu'une carte avec des bords francs. */ border: 1px dashed var(--ink-soft); border-radius: 0; overflow: hidden; cursor: move; } /* Bouton d'action propre au bloc (ex: "Changer l'image"), en bas à gauche — toujours visible, pas juste au survol. */ .sheet-tile-action { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: 5px; cursor: pointer; border: 1px solid var(--accent-dark); background: #fff; color: var(--accent-dark); } /* Bouton supprimer : une simple croix en haut à droite plutôt qu'un gros bouton texte, pour rester aussi discret que possible sur le bloc. */ .sheet-tile-delete { position: absolute; top: 6px; right: 6px; z-index: 3; width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center; font-size: 0.95rem; font-weight: 700; border-radius: 50%; border: 1px solid var(--ink-soft); background: #fff; color: var(--ink-soft); cursor: pointer; } .sheet-tile-delete:hover { background: #b3261e; border-color: #b3261e; color: #fff; } .sheet-tile-body { height: 100%; box-sizing: border-box; /* Seulement vertical : un débordement horizontal (mot trop long, "AAAA..." sans espaces, etc.) ferait apparaître une barre de défilement collée en bas du bloc, exactement là où se trouve la poignée de redimensionnement du bord bas — elle devenait alors impossible à attraper. */ overflow-y: auto; overflow-x: hidden; /* GridStack ignore volontairement les clics qui démarrent sur du texte éditable pour démarrer un déplacement (sinon impossible de cliquer dans le texte sans faire bouger le bloc) — donc si le texte occupe tout le bloc jusqu'au bord, il ne reste plus aucune zone pour l'attraper et le déplacer. Ce padding (non-éditable, contrairement au texte qu'il entoure, voir la règle suivante) est ce qui reste cliquable pour déplacer le bloc en attrapant son pourtour, comme sur les pointillés. */ padding: 1rem; } .sheet-tile-body [contenteditable] { cursor: text; overflow-wrap: break-word; } /* Le texte occupe naturellement peu de hauteur : sans ça, seule la ligne de texte elle-même est cliquable pour éditer, et le reste du bloc (en dessous) ne fait rien au clic. On étire la zone éditable sur toute la hauteur disponible du bloc pour qu'on puisse cliquer n'importe où dedans. */ .sheet-tile-body > [contenteditable] { min-height: 100%; box-sizing: border-box; } .sheet-tile-body > *:first-child { margin-top: 0; } .sheet-tile-body > *:last-child { margin-bottom: 0; } .sheet-tile-body [contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .sheet-tile-image { position: relative; height: 100%; background: var(--paper); } .sheet-tile-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sheet-tile-video { display: flex; flex-direction: column; height: 100%; } .sheet-tile-video video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; } .sheet-tile-video-input { flex-shrink: 0; width: 100%; font-family: var(--font-body); font-size: 0.78rem; padding: 0.3rem 0.5rem; border: none; border-top: 1px solid var(--paper-line); } /* Barre flottante police/taille, partagée par tous les blocs texte/citation/ liste (voir #sheet-text-toolbar dans admin.html) : affichée au-dessus de la grille au lieu d'être répétée à demeure dans chaque bloc, pour que le bloc lui-même ne montre que son contenu final ("à la Paint"). */ .sheet-text-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; border-radius: 6px; background: #f2ecfb; border: 1px solid var(--accent); } .sheet-text-font, .sheet-text-size { font-family: var(--font-body); font-size: 0.72rem; padding: 0.15rem 0.3rem; border: 1px solid var(--paper-line); border-radius: 4px; background: #fff; color: var(--ink-soft); } /* Boutons gras/italique/souligné/barré : réutilisent .rich-text-btn (voir plus bas) mais un peu plus petits pour rester à l'échelle de cette barre compacte, à côté des contrôles police/taille. */ .sheet-text-toolbar .rich-text-btn { width: 26px; height: 26px; font-size: 0.72rem; } .sheet-text-size { width: 3.4rem; } /* --- Contenu d'une fiche de cours (rendu public + aperçu dans l'éditeur) --- */ .sheet-content { /* Volontairement plus large que la colonne de lecture du reste du site (672px) : une fiche est une grille de blocs (pas juste du texte qui coule), donc autant utiliser la largeur du cadre "page" plutôt que de laisser une grosse marge blanche inutilisée de chaque côté. En "max-width" (pas "width"), ça reste fluide : le contenu (en flux normal, pas en position absolue) se réduit et s'empile tout seul sur tablette/mobile, sans jamais rien pousser hors champ. */ max-width: 1040px; margin: 0 auto; } .sheet-content h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; line-height: 1.25; color: var(--accent-dark); margin: 1.75rem 0 0.75rem; } .sheet-content h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--accent-dark); margin: 1.4rem 0 0.6rem; } .sheet-content p { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 1rem; } .sheet-content blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--accent); margin: 1.5rem 0; padding: 0.4rem 0 0.4rem 1.25rem; } .sheet-content ul { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 1rem; padding-left: 1.25rem; } .sheet-content li { margin-bottom: 0.4rem; } .sheet-content img { max-width: 100%; height: auto; border-radius: 6px; } .sheet-content hr { border: none; border-top: 1px solid var(--paper-line); margin: 1.75rem 0; } /* --- Éditeur d'examen QCM --- */ .exam-description-input { display: block; width: 100%; font-family: var(--font-body); font-size: 0.95rem; 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); resize: vertical; } .exam-scoring-panel { background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .exam-scoring-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-dark); margin: 0 0 1rem; } .exam-scoring-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .exam-scoring-row:last-child { margin-bottom: 0; } .exam-scoring-row label { font-size: 0.88rem; color: #ffffff; } .exam-scoring-input { font-family: var(--font-body); font-size: 0.88rem; padding: 0.4rem 0.6rem; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--ink); flex-shrink: 0; } .exam-scoring-row select.exam-scoring-input { max-width: 60%; } .exam-scoring-row input.exam-scoring-input { width: 5rem; text-align: right; } #exam-questions-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .exam-question { background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(44, 31, 69, 0.06); } .exam-question-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .exam-question-index { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-dark); } .exam-question-text { display: block; width: 100%; font-family: var(--font-body); font-size: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; background: #fff; color: var(--ink); resize: vertical; margin-bottom: 0.75rem; } .exam-question-media { margin-bottom: 0.75rem; } .exam-question-media img, .exam-question-media video { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; margin-bottom: 0.5rem; } .exam-media-remove { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: #b3261e; cursor: pointer; } .exam-media-buttons { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .exam-options-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .exam-option { display: flex; align-items: center; gap: 0.6rem; } .exam-option-correct { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--accent-dark); cursor: pointer; } .exam-option-text { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 0.92rem; padding: 0.45rem 0.6rem; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--ink); } .exam-option-delete { flex-shrink: 0; width: 24px; height: 24px; line-height: 22px; text-align: center; padding: 0; border: 1px solid var(--paper-line); border-radius: 50%; background: #fff; color: var(--ink-soft); font-size: 0.95rem; cursor: pointer; } .exam-option-delete:hover { background: #b3261e; border-color: #b3261e; color: #fff; } .exam-add-option { background: none; border: none; padding: 0.4rem 0; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); cursor: pointer; } .exam-add-option:hover { text-decoration: underline; } /* --- Modale générique (choix du type d'examen pour l'instant) --- */ .modal-overlay { position: fixed; inset: 0; background: rgba(44, 31, 69, 0.45); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 100; } /* Sans ça, "display: flex" ci-dessus écrase le "display: none" par défaut du navigateur pour [hidden], et la modale reste visible en permanence. */ .modal-overlay[hidden] { display: none; } .modal-card { background: #fff; border-radius: 10px; box-shadow: 0 20px 50px rgba(44, 31, 69, 0.28); padding: 2rem; width: 100%; max-width: 420px; text-align: center; } .modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--accent-dark); margin: 0 0 1.25rem; } .modal-option-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .modal-option-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--paper-line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background 0.15s ease; } .modal-option-btn:hover:not(:disabled) { border-color: var(--accent-dark); background: var(--paper); } .modal-option-btn:disabled { cursor: not-allowed; opacity: 0.55; } .modal-option-label { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--ink); } .modal-option-desc { font-size: 0.8rem; color: var(--ink-soft); } /* --- Modale d'accès élèves (cours + examens) --- */ .access-modal-card { max-width: 480px; text-align: left; } .access-modal-card .modal-title { text-align: center; } /* --- Modale "Nouveau cours" (choix du template) --- */ #course-template-modal label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); text-align: left; } #course-template-title-input { display: block; width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.55rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; margin: 0.4rem 0 1rem; background: #fff; color: var(--ink); } /* --- Modale "Déplacer / Convertir" (fiches, sous-catégories, examens) --- */ .move-item-modal-card { max-width: 480px; text-align: left; } .move-item-modal-card .modal-title { text-align: center; } #move-item-mode-row { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } #move-item-destination-rows label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin: 0.75rem 0 0.3rem; } #move-item-destination-rows select { display: block; width: 100%; font-family: var(--font-body); font-size: 0.92rem; padding: 0.5rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; background: #fff; color: var(--ink); } .access-search { display: block; width: 100%; font-family: var(--font-body); font-size: 0.92rem; padding: 0.5rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; margin-bottom: 0.75rem; background: #fff; color: var(--ink); } .access-list { list-style: none; margin: 0 0 0.5rem; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--paper-line); border-radius: 6px; } .access-item { border-bottom: 1px solid var(--paper-line); } .access-item:last-child { border-bottom: none; } .access-item label { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; cursor: pointer; } .access-item label:hover { background: var(--paper); } .access-item input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--accent-dark); cursor: pointer; } .access-item-name { font-size: 0.92rem; color: var(--ink); font-weight: 600; } .access-item-email { font-size: 0.8rem; color: var(--ink-soft); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .access-list-empty { padding: 1rem; text-align: center; color: var(--ink-soft); font-size: 0.88rem; } .access-modal-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; } /* --- Modale "Profil" d'un utilisateur (onglet Utilisateurs) --- */ .user-profile-modal-card { max-width: 720px; /* Légèrement transparente et teintée de rose (plutôt que blanc plein) pour rester lisible tout en rappelant la DA violet/rose du reste du site — même rose que .student-list-desc mark (#f6d8ea) plus haut, juste dilué dans du blanc translucide. */ background: rgba(253, 226, 243, 0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .user-profile-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .user-profile-header #user-profile-view-submissions-btn { margin-left: auto; } .user-profile-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .user-profile-avatar[hidden] { display: none; } .user-profile-access-columns { display: flex; gap: 1.25rem; } .user-profile-access-col { flex: 1; min-width: 0; } .user-profile-access-col h3 { margin: 0 0 0.4rem; font-size: 0.95rem; } @media (max-width: 640px) { .user-profile-access-columns { flex-direction: column; } } /* --- Espace élève (cours.html) --- */ .student-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .student-list-item { background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; padding: 1rem 1.25rem; } .student-list-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-dark); margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; } /* Cours/examen archivé, visible seulement grâce à "afficher les passés" */ .student-list-item--archived { background: var(--paper); opacity: 0.85; } .student-list-badge { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--gold); color: #fff; } .student-list-desc { font-size: 0.88rem; color: var(--ink); margin: 0 0 0.5rem; } /* .student-list-desc est aussi réutilisée dans la liste des examens (carte blanche, doit rester lisible en foncé) — la description de COURS, affichée directement sur le dégradé (admin ET élève, pas de carte), a besoin de sa propre couleur ici plutôt que de changer la classe entière. */ #course-description-preview, #my-course-detail-desc { color: #ffffff; } .student-list-meta { font-size: 0.76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .auth-form--student-info { max-width: 420px; } .auth-form--student-info input:disabled { color: var(--ink-soft); background: var(--paper); cursor: not-allowed; } .student-list-item--clickable { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .student-list-item--clickable:hover, .student-list-item--clickable:focus-visible { border-color: var(--accent-dark); box-shadow: 0 2px 10px rgba(44, 31, 69, 0.1); outline: none; } /* --- Lecture d'une fiche (rendu figé, sans le chrome de l'éditeur) --- */ .sheet-tile-view { height: 100%; } .sheet-tile-view-media { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } /* --- Passage d'un examen (élève) --- */ .exam-take-questions { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .exam-take-question { background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(44, 31, 69, 0.06); } .exam-take-question-index { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--accent-dark); margin: 0 0 0.4rem; } .exam-take-question-text { font-size: 1rem; color: var(--ink); margin: 0 0 0.75rem; } .exam-take-question-media { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; margin-bottom: 0.75rem; } /* Image cliquable pour l'agrandir (voir openImageLightbox/makeImageZoomable dans student-courses-exams.js) — fiches et questions d'examen, jamais les vidéos (elles ont déjà leurs propres contrôles natifs). */ .zoomable-image { cursor: zoom-in; transition: opacity 0.15s ease; } .zoomable-image:hover { opacity: 0.88; } .image-lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(44, 31, 69, 0.85); cursor: zoom-out; } .image-lightbox-img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .exam-take-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .exam-take-option label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--ink); cursor: pointer; } .exam-take-option-checkbox { width: 18px; height: 18px; accent-color: var(--accent-dark); cursor: pointer; } .exam-result-score { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; color: var(--accent-dark); text-align: center; margin: 2rem 0; } /* --- Détail d'une copie côté prof : bonnes réponses en vert, mauvaises cases cochées en rouge --- */ .submission-option { padding: 0.35rem 0.6rem; border-radius: 5px; border: 1px solid transparent; } .submission-option--correct { background: rgba(47, 158, 86, 0.12); border-color: var(--success); } .submission-option--wrong { background: rgba(179, 38, 30, 0.08); border-color: #b3261e; } .submission-option-marker { font-size: 1rem; } /* --- Bandeau "afficher les cours/examens passés" (mes-cours.html) --- Désactivé pour l'instant : ça suppose une notion de date de fin qui n'existe pas encore sur les cours/examens. */ .past-toggle { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1.25rem; font-size: 0.88rem; color: #ffffff; } .past-toggle label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .past-toggle input { cursor: pointer; accent-color: var(--accent-dark); } /* --- Page d'erreur 404 --- */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .error-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.14), 0 2px 8px rgba(44, 31, 69, 0.07); padding: 2.5rem 2.5rem 3rem; max-width: 420px; width: 100%; text-align: center; } .error-image { max-width: 220px; width: 100%; height: auto; margin: 0 auto 1.5rem; display: block; } .error-text { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin: 0 0 1.5rem; } .error-home-link { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: #fff; background: var(--accent-dark); padding: 0.65rem 1.4rem; border-radius: 999px; text-decoration: none; transition: background 0.2s ease; } .error-home-link:hover, .error-home-link:focus-visible { background: var(--accent); } /* --- Exercices de fiche (édition, réponse élève, correction manuelle) --- */ #sheet-exercises-list, #exercise-correction-list, .exercise-answer-form ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } /* Même carte que .exam-question (fond blanc, bord léger, ombre douce) : les deux domaines (examens/exercices) partagent le même look de "carte". */ .exercise-editor-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(44, 31, 69, 0.06); } .exercise-editor-card .exam-question-index { display: block; margin-bottom: 0.5rem; } .exercise-type-select { display: block; font-family: var(--font-body); font-size: 0.9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--ink); margin-bottom: 0.6rem; } .exercise-qcm-options { margin-top: 0.75rem; } .exercise-answer-question { font-weight: 600; color: var(--ink); margin: 0 0 0.75rem; } /* Cours "30 jours" : pas de "Exercice N" affiché (voir student-sheet-exercises.js), la consigne reprend la couleur qu'avait le numéro caché. */ .exercise-answer-question--scheduled { color: var(--accent-dark); } .exercise-free-text-input, .exercise-teacher-comment { display: block; width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.6rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; color: var(--ink); margin-top: 0.5rem; } /* Ancre pour le calque de dessin (annotation-canvas), posé par-dessus en position absolute : doit rester positionné pour ça. */ .exercise-answer-display { position: relative; padding: 0.75rem 1rem; background: var(--paper); border-radius: 6px; margin-bottom: 0.5rem; } .exercise-answer-text { margin: 0; color: var(--ink); white-space: pre-wrap; } .exercise-answer-file-image { display: block; max-width: 100%; border-radius: 6px; } .exercise-teacher-comment-display { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; background: var(--paper); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 0.9rem; color: var(--ink); } .answer-explanation-display { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; background: #AE9BF7; border-radius: 4px; font-family: var(--font-display); font-size: 0.9rem; color: var(--accent-dark); white-space: pre-wrap; } .exercise-status-badge { display: inline-block; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; margin: 0 0 1rem; } .exercise-status-badge--pending { background: rgba(224, 98, 155, 0.15); color: var(--gold); } .exercise-status-badge--corrected { background: rgba(47, 158, 86, 0.12); color: var(--success); } .exercise-status-badge--refused { background: rgba(179, 38, 30, 0.08); color: #b3261e; } /* --- Calque de dessin (canvas-annotation.js) --- */ .annotation-canvas { position: absolute; inset: 0; touch-action: none; } .annotation-canvas--editable { cursor: crosshair; } .annotation-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.75rem; flex-wrap: wrap; } .annotation-color-group { display: flex; align-items: center; gap: 0.4rem; position: relative; } .annotation-color-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; } .annotation-color-btn--active { border-color: var(--ink); } /* Sélecteur de couleur natif (spectre + intensité), stylé en pastille ronde pour matcher les 4 boutons de couleur fixe à côté — cliqué DIRECTEMENT, pas de bouton décoratif par-dessus + input caché déclenché par procuration (cette astuce précédente causait des artefacts visuels et cassait le clic selon les navigateurs). Le fond affiché est simplement la couleur actuellement choisie (géré nativement par le navigateur), donc toujours cohérent, jamais de double-rendu. */ .annotation-color-input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background: none; } .annotation-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; } .annotation-color-input::-webkit-color-swatch { border: none; border-radius: 50%; } .annotation-color-input::-moz-color-swatch { border: none; border-radius: 50%; } /* Icône 🎨 superposée à l'input color pour signaler "choisir une autre couleur" (sinon indiscernable d'une 5e pastille fixe) — voir canvas-annotation.js : 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); } /* --- Photo de profil --- */ .top-nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-right: 0.35rem; } /* Petit avatar réutilisé partout où un nom d'utilisateur apparaît côté admin (liste des utilisateurs, accès, copies reçues...) — voir public/js/avatar.js */ .user-avatar-small { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.4rem; flex-shrink: 0; } .profile-photo-picker { position: relative; width: 110px; height: 110px; border-radius: 50%; border: 2px dashed var(--paper-line); background: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; margin: 0 auto 0.5rem; transition: border-color 0.2s ease; } .profile-photo-picker:hover, .profile-photo-picker:focus-visible { border-color: var(--accent-dark); outline: none; } .profile-photo-preview { width: 100%; height: 100%; object-fit: cover; } .profile-photo-placeholder { font-size: 0.8rem; color: var(--ink-soft); text-align: center; padding: 0 0.75rem; } /* --- Bulle de messagerie flottante (prof <-> élèves) --- */ .chat-bubble { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent-dark); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(44, 31, 69, 0.3); z-index: 200; transition: background 0.2s ease, transform 0.15s ease; } .chat-bubble:hover, .chat-bubble:focus-visible { background: var(--accent); transform: scale(1.05); outline: none; } .chat-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .chat-panel { position: fixed; bottom: 5.5rem; right: 1.5rem; width: 320px; max-width: calc(100vw - 2rem); height: 440px; max-height: calc(100vh - 8rem); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(44, 31, 69, 0.28); display: flex; flex-direction: column; overflow: hidden; z-index: 200; } /* Même piège que .modal-overlay plus haut : "display: flex" ci-dessus (et sur .chat-badge / .chat-thread) écrase le "display: none" par défaut du navigateur pour [hidden] — sans ces règles, basculer .hidden en JS n'a aucun effet visuel et l'élément reste affiché en permanence. */ .chat-panel[hidden], .chat-badge[hidden], .chat-thread[hidden] { display: none; } .chat-panel-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; background: var(--accent-dark); color: #fff; flex-shrink: 0; } .chat-back-btn, .chat-close-btn { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 0.1rem 0.3rem; line-height: 1; } .chat-panel-title { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .chat-search { margin: 0.75rem 1rem 0.5rem; font-family: var(--font-body); font-size: 0.88rem; padding: 0.5rem 0.7rem; border: 1px solid var(--paper-line); border-radius: 6px; flex-shrink: 0; } .chat-contact-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .chat-contact-empty { padding: 1rem; color: var(--ink-soft); font-size: 0.88rem; text-align: center; } .chat-contact-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; cursor: pointer; border-bottom: 1px solid var(--paper-line); } .chat-contact-item:hover, .chat-contact-item:focus-visible { background: var(--paper); outline: none; } .chat-contact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .chat-contact-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); } .chat-contact-role { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); } .chat-contact-preview { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-contact-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .chat-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; } .chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .chat-message { max-width: 78%; padding: 0.5rem 0.75rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; word-break: break-word; } .chat-message--mine { align-self: flex-end; background: var(--accent-dark); color: #fff; border-bottom-right-radius: 4px; } .chat-message--theirs { align-self: flex-start; background: var(--paper); color: var(--ink); border-bottom-left-radius: 4px; } .chat-attachment-preview { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.75rem 0.5rem; padding: 0.4rem 0.6rem; background: var(--paper); border-radius: 8px; font-size: 0.8rem; color: var(--ink-soft); flex-shrink: 0; } .chat-attachment-preview[hidden] { display: none; } .chat-attachment-preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-attachment-preview-remove { flex-shrink: 0; background: none; border: none; color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; } .chat-attachment-preview-remove:hover { color: #b3261e; } .chat-message-text { margin: 0; } .chat-message-image { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; margin-bottom: 0.3rem; } .chat-message-video { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; margin-bottom: 0.3rem; } .chat-message-file-link { display: inline-block; color: inherit; text-decoration: underline; font-size: 0.85rem; } .chat-message-attachment-expired { margin: 0; font-size: 0.8rem; font-style: italic; opacity: 0.75; } /* --- Examens : questions "réponse libre" (correction manuelle) --- */ .exam-question-type-select { display: block; font-family: var(--font-body); font-size: 0.9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--ink); margin-bottom: 0.6rem; } /* Même piège [hidden]/display:flex que .chat-panel plus haut : .exam-options-list a display:flex, donc masquer via .hidden a besoin de cette règle explicite. */ .exam-options-list[hidden] { display: none; } .exam-take-free-text-input { display: block; width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.6rem 0.75rem; border: 1px solid var(--paper-line); border-radius: 6px; color: var(--ink); } /* Simple conteneur de mise en page (la vraie "boîte" visuelle est .exercise-answer-display, réutilisée comme ancre du calque de dessin). */ .exam-free-text-review { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } .exam-free-text-review[hidden] { display: none; } .exam-free-text-answer { margin: 0 0 0.6rem; color: var(--ink); white-space: pre-wrap; } .exam-correct-toggle { display: flex; gap: 0.5rem; } .exam-correct-btn { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--paper-line); background: #fff; color: var(--ink-soft); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .exam-correct-btn--correct.exam-correct-btn--active { background: var(--success); border-color: var(--success); color: #fff; } .exam-correct-btn--incorrect.exam-correct-btn--active { background: #b3261e; border-color: #b3261e; color: #fff; } .exam-correct-badge { display: inline-block; margin: 0; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; } .exam-correct-badge--correct { background: rgba(47, 158, 86, 0.12); color: var(--success); } .exam-correct-badge--incorrect { background: rgba(179, 38, 30, 0.08); color: #b3261e; } .admin-toolbar-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--paper-line); } .admin-toolbar-block label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; } .admin-toolbar-block textarea, .admin-toolbar-block input { display: block; width: 100%; font-family: var(--font-body); font-size: 0.9rem; padding: 0.55rem 0.7rem; border: 1px solid var(--paper-line); border-radius: 6px; color: var(--ink); margin-bottom: 1rem; } .exam-result-comment { margin: 0.75rem auto 0; max-width: 40ch; padding: 0.75rem 1rem; background: var(--paper); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 0.9rem; color: var(--ink); text-align: left; } .chat-input-row { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--paper-line); flex-shrink: 0; } .chat-attach-btn { flex-shrink: 0; background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0 0.2rem; line-height: 1; } .chat-input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 0.9rem; padding: 0.5rem 0.7rem; border: 1px solid var(--paper-line); border-radius: 999px; } .chat-send-btn { background: var(--accent-dark); color: #fff; border: none; border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.2s ease; } .chat-send-btn:hover { background: var(--accent); } @media (max-width: 480px) { .chat-panel { right: 0.75rem; bottom: 5rem; } .chat-bubble { right: 1rem; bottom: 1rem; } } /* --- Page "Qui suis-je ?" : texte à gauche, photo à droite, dans un cadre qui s'arrête juste sous le contenu (pas de hauteur imposée). --- */ .about-main { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; } .about-card { display: flex; align-items: center; gap: 2.5rem; padding: 2rem 2.5rem; } .about-text { flex: 1 1 55%; min-width: 0; } .about-text p { margin: 0 0 1rem; color: #ffffff; line-height: 1.7; font-size: 0.95rem; } .about-text p:last-child { margin-bottom: 0; } .about-highlight { color: #ffffff; font-weight: 600; text-decoration: underline; } .about-photo-wrap { flex: 0 0 auto; width: 40%; max-width: 300px; } .about-photo { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.18); } @media (max-width: 720px) { .about-card { flex-direction: column; padding: 1.75rem; } .about-photo-wrap { width: 55%; order: -1; } } /* --- Page "Prestations" : 3 blocs titre + image + texte --- */ .prestations-main { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 4rem; } .prestation-block { margin-bottom: 4rem; } .prestation-block:last-child { margin-bottom: 0; } .prestation-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3.5vw, 1.7rem); color: #40EAE8; text-align: center; margin: 0 0 1.75rem; } .prestation-row { display: flex; align-items: flex-start; gap: 2.5rem; } .prestation-image-wrap { flex: 0 0 auto; width: 34%; max-width: 320px; } /* Bloc "30 jours" : l'image est seule dans .prestation-row (pas de .prestation-text à côté, ce texte-là vit dans .prestation-extra en dessous) — sans ça, un unique item flex reste collé à gauche avec tout le reste de la rangée vide à droite. */ .prestation-row > .prestation-image-wrap:only-child { width: 50%; max-width: 340px; margin: 0 auto; } .prestation-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.18); } .prestation-text { flex: 1 1 auto; min-width: 0; } .prestation-text p { margin: 0 0 1rem; color: #ffffff; line-height: 1.7; font-size: 0.95rem; } .prestation-text p:last-child { margin-bottom: 0; } .prestation-extra { max-width: 700px; margin: 2rem auto 0; } .prestation-subheading { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #40EAE8; margin: 1.5rem 0 0.5rem; } .prestation-extra p { margin: 0 0 0.9rem; color: #ffffff; line-height: 1.7; font-size: 0.95rem; } @media (max-width: 720px) { .prestation-row { flex-direction: column; } .prestation-image-wrap { width: 60%; max-width: 260px; margin: 0 auto; } } /* --- Page "Tarifs & FAQ" : titre + photo à gauche, accordéon à droite --- */ .tarifs-main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 4rem; } .tarifs-layout { display: flex; align-items: flex-start; gap: 3rem; } .tarifs-intro { flex: 0 0 34%; max-width: 380px; } .tarifs-intro-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.3; color: #40EAE8; margin: 0 0 2rem; } .tarifs-photo { display: block; width: 100%; aspect-ratio: 3 / 4; /* Forme "vitrail" : juste le haut en arc de cercle (rayon vertical faible = arc peu profond), le reste droit/anguleux. Le rayon horizontal à 50% garantit que l'arc part bien du bord de l'image. */ border-radius: 50% 50% 0 0 / 30% 30% 0 0; object-fit: cover; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.18); } .faq-list { flex: 1 1 auto; min-width: 0; border-top: 1px solid var(--paper-line); } .faq-item { border-bottom: 1px solid var(--paper-line); } .faq-question { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; width: 100%; background: none; border: none; text-align: left; padding: 1.1rem 0; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: uppercase; color: #40EAE8; cursor: pointer; } .faq-question:hover, .faq-question:focus-visible { color: #40EAE8; } .faq-icon { flex-shrink: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.1; color: var(--gold); } .faq-answer { padding: 0 1.5rem 1.25rem 0; } .faq-answer p { margin: 0 0 0.85rem; color: #ffffff; line-height: 1.7; font-size: 0.92rem; } .faq-answer p:last-child { margin-bottom: 0; } /* --- Détail d'une inscription (admin) --- */ .registration-detail-field { margin-bottom: 1rem; } .registration-detail-field label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #ffffff; margin-bottom: 0.2rem; } .registration-detail-field p { margin: 0; color: #ffffff; white-space: pre-wrap; } /* --- Formulaire d'inscription (public, sans compte) --- */ .registration-main { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; } .registration-note { margin: 0.75rem 0 0; color: #ffffff; font-size: 0.9rem; } .registration-note a { color: #40EAE8; font-weight: 600; } .registration-layout { display: flex; align-items: flex-start; gap: 2.5rem; } .registration-photo { flex: 0 0 auto; width: 240px; height: 240px; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 32px rgba(44, 31, 69, 0.18); position: sticky; top: 2rem; } .registration-layout .auth-form { flex: 1 1 auto; min-width: 0; } /* Répété ici en plus de la règle .auth-form label ci-dessus (même valeur, déjà correcte pour les deux) pour rester explicite au cas où le style de base de .auth-form label change un jour indépendamment. */ .registration-layout .auth-form label { color: #40EAE8; } @media (max-width: 780px) { .registration-layout { flex-direction: column; align-items: center; } .registration-photo { position: static; width: 180px; height: 180px; } } .registration-main .auth-form textarea { 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); resize: vertical; } .registration-main .auth-form select { 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); } .radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; } .radio-option, .checkbox-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: #ffffff; cursor: pointer; } .radio-option input, .checkbox-option input { accent-color: var(--accent-dark); cursor: pointer; } .checkbox-option:has(input:disabled) { color: #ffffff; opacity: 0.6; cursor: not-allowed; } @media (max-width: 780px) { .tarifs-layout { flex-direction: column; gap: 2rem; } .tarifs-intro { max-width: none; width: 100%; } .tarifs-photo { max-width: 220px; margin: 0 auto; } }