/* Pilote Militaire — dashboard (inspiration Concours Armée / Airwallex) */
:root {
--dash-bg-page: #f7f8fa;
--dash-bg-card: #ffffff;
--dash-sidebar-bg: #141414;
--dash-sidebar-text: #e8e8e8;
--dash-sidebar-muted: #8a8a8a;
--dash-accent: #e85d4c;
--dash-accent-soft: #6b4c9a;
--dash-header-border: #e8eaef;
--dash-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
--dash-radius: 12px;
--dash-radius-sm: 8px;
/* Geist via pm-tokens.css (charte vitrine PM, ADR 0039) ; repli system-ui
pour toute page qui chargerait ce fichier sans les tokens. */
--dash-font: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
--dash-page-max: 1400px;
--dash-sidebar-width: 260px;
/* Hauteur approximative du header sticky (padding + titre) */
--dash-header-offset: 61px;
/* Aligné sur .dash-main padding-top — évite le « saut » du sticky LMS */
--dash-main-pad-top: 24px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scrollbar-gutter: stable;
}
html,
body {
margin: 0;
padding: 0;
font-family: var(--dash-font);
background: var(--dash-bg-page);
color: #1a1a1a;
min-height: 100%;
}
/* ——— Header ——— */
.dash-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: var(--dash-bg-card);
border-bottom: 1px solid var(--dash-header-border);
position: sticky;
top: 0;
z-index: 1000;
}
.dash-header__brand {
display: flex;
flex-direction: column;
gap: 2px;
}
.dash-header__title {
margin: 0;
font-size: 1.15rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.dash-header__tagline {
font-size: 0.75rem;
color: #6b7280;
}
.dash-header__actions {
display: flex;
align-items: center;
gap: 16px;
}
.dash-header__email {
font-size: 0.875rem;
color: #4b5563;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-btn {
border: 1px solid #d1d5db;
border-radius: var(--dash-radius-sm);
padding: 8px 14px;
font-size: 0.875rem;
font-weight: 500;
background: #fff;
color: #374151;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.dash-btn:hover {
background: #f9fafb;
border-color: #c4c8d0;
}
.dash-btn--primary {
background: var(--dash-accent-soft);
border-color: var(--dash-accent-soft);
color: #fff;
}
.dash-btn--primary:hover {
filter: brightness(1.06);
border-color: var(--dash-accent-soft);
}
.dash-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--dash-accent-soft), #9b7ec4);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
/* ——— Layout ——— */
/* Pleine largeur : la sidebar reste collée au bord gauche du viewport (zoom / grands écrans).
Le contenu est centré dans la zone principale uniquement (type Airwallex). */
.dash-layout {
display: flex;
align-items: flex-start;
min-height: calc(100vh - var(--dash-header-offset));
flex-direction: row;
width: 100%;
max-width: none;
margin: 0;
}
.dash-main {
flex: 1;
min-width: 0;
padding: 24px 28px 48px;
}
.dash-main > .view-panel {
max-width: var(--dash-page-max);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ——— Left sidebar ——— */
.dash-sidebar {
width: var(--dash-sidebar-width);
flex-shrink: 0;
align-self: flex-start;
position: sticky;
top: var(--dash-header-offset);
/* Remplit la hauteur sous le header : plus de bande claire sous le menu */
min-height: calc(100vh - var(--dash-header-offset));
max-height: calc(100vh - var(--dash-header-offset));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 50;
background: var(--dash-sidebar-bg);
color: var(--dash-sidebar-text);
padding: 20px 0 24px;
display: flex;
flex-direction: column;
border-right: 1px solid #2a2a2a;
}
/* Hamburger : visible uniquement en vue mobile (voir media query < 900px). */
.dash-sidebar__toggle {
display: none;
}
/* Compte en pied de menu : n'existe qu'en vue mobile (au-dessus de 900px, le header le porte). */
.dash-sidebar-account {
display: none;
}
.dash-sidebar__label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dash-sidebar-muted);
padding: 0 20px 8px;
margin-top: 12px;
}
.dash-sidebar__label:first-child {
margin-top: 0;
}
.dash-nav-item {
display: flex;
align-items: center;
width: 100%;
text-align: left;
padding: 10px 20px;
border: none;
background: transparent;
color: var(--dash-sidebar-text);
font-size: 0.9rem;
cursor: pointer;
gap: 10px;
transition: background 0.12s, color 0.12s;
}
.dash-nav-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.dash-nav-item.active {
color: var(--dash-accent);
background: rgba(232, 93, 76, 0.08);
}
.dash-nav-item__icon {
width: 18px;
text-align: center;
opacity: 0.85;
font-size: 0.95rem;
}
.dash-nav-item__icon--svg {
display: flex;
align-items: center;
justify-content: center;
}
.dash-nav-item__icon--svg svg {
display: block;
flex-shrink: 0;
}
.dash-nav-details {
margin: 0;
padding: 0;
}
.dash-nav-details > summary {
list-style: none;
}
.dash-nav-details > summary::-webkit-details-marker {
display: none;
}
.dash-nav-summary {
display: flex;
align-items: center;
width: 100%;
padding: 10px 20px;
cursor: pointer;
color: var(--dash-sidebar-text);
font-size: 0.9rem;
gap: 10px;
user-select: none;
list-style: none;
}
.dash-nav-summary__label {
flex: 1;
min-width: 0;
text-align: left;
}
.dash-nav-chevron-btn {
margin: -4px -6px -4px auto;
padding: 4px 8px;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 4px;
}
.dash-nav-chevron-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.dash-nav-chevron-btn:focus-visible {
outline: 2px solid var(--dash-accent);
outline-offset: 2px;
}
.dash-nav-summary:hover {
background: rgba(255, 255, 255, 0.06);
}
.dash-nav-summary.active-parent {
color: var(--dash-accent);
}
.dash-nav-chevron {
font-size: 0.65rem;
opacity: 0.7;
transition: transform 0.2s;
display: block;
}
.dash-nav-details[open] .dash-nav-chevron {
transform: rotate(180deg);
}
.dash-nav-sub {
padding: 4px 0 8px 0;
display: flex;
flex-direction: column;
}
/* Depuis les espaces (ADR 0028), ces liens SONT le menu principal : le titre de
filière (.dash-nav-summary) est masqué, le commutateur d'espaces a repris son
rôle. Ils portent donc le style premier niveau, pas celui d'un sous-menu. */
.dash-nav-sub a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
font-size: 0.9rem;
color: var(--dash-sidebar-text);
text-decoration: none;
transition: color 0.12s, background 0.12s;
}
.dash-nav-sub__label {
min-width: 0;
}
.dash-nav-sub a:hover {
background: rgba(255, 255, 255, 0.06);
}
.dash-nav-sub a.is-disabled {
pointer-events: none;
opacity: 0.45;
}
.dash-nav-sub a.active {
color: var(--dash-accent);
font-weight: 600;
background: rgba(232, 93, 76, 0.08);
}
/* hidden doit primer sur display:flex des liens du sous-menu (LMS, etc.). */
.dash-nav-sub a[hidden] {
display: none !important;
}
.dash-sidebar__footer {
margin-top: auto;
padding: 20px;
font-size: 0.7rem;
color: var(--dash-sidebar-muted);
border-top: 1px solid #2a2a2a;
}
.dash-sidebar__footer-tagline {
margin: 0 0 8px;
}
/* Liens légaux du pied de menu (lot B3, resserré au trio le 04/08). À la file, séparés
par « · » — gabarit de Concours Armée. La colonne d'origine tenait à CINQ libellés ;
ramenés à trois, ils tiennent sur UNE ligne. Mesuré dans le rail de 260 px : bloc de
liens à 15 px de haut contre ≈ 106 px pour la colonne, 171 px de texte pour 220 px
utiles — pas de retour à la ligne, et le pavé disparaît.
Le séparateur est un ::after porté par le lien, PAS un gap flex : au retour à la
ligne, un flex/gap laisserait un « · » orphelin EN TÊTE de la ligne suivante. Il est
dans le lien, donc il ne se détache jamais du libellé qu'il suit. */
.dash-sidebar__footer-links {
font-size: 0.6rem;
line-height: 1.6;
}
.dash-sidebar__footer-links a {
color: var(--dash-sidebar-muted);
text-decoration: none;
}
/* :focus-visible traité comme :hover — au clavier, la seule voie d'accès permanente aux
pages légales doit se voir aussi bien qu'à la souris. */
.dash-sidebar__footer-links a:hover,
.dash-sidebar__footer-links a:focus-visible {
color: #fff;
text-decoration: underline;
}
.dash-sidebar__footer-links a:not(:last-child)::after {
content: " · ";
color: var(--dash-sidebar-muted);
text-decoration: none;
}
.dash-sidebar-upgrade[hidden] {
display: none !important;
}
.dash-sidebar-upgrade {
margin: 12px 16px 0;
padding: 14px;
border-radius: 10px;
border: 1px solid rgba(232, 93, 76, 0.35);
background: rgba(232, 93, 76, 0.08);
}
.dash-sidebar-upgrade__title {
margin: 0;
font-size: 0.85rem;
font-weight: 700;
color: #fff0ef;
}
.dash-sidebar-upgrade__text {
margin: 8px 0 0;
font-size: 0.77rem;
line-height: 1.45;
color: #f4d4cf;
}
.dash-sidebar-upgrade__btn {
width: 100%;
margin-top: 12px;
text-align: center;
background: var(--dash-accent);
border-color: var(--dash-accent);
color: #fff;
}
.dash-sidebar-upgrade__btn:hover {
background: #d44a3a;
border-color: #d44a3a;
}
.dash-sidebar-upgrade__btn:focus-visible {
outline: 2px solid rgba(232, 93, 76, 0.45);
outline-offset: 2px;
}
/* --- Commutateur d'espaces (ADR 0028) -------------------------------------
Le commutateur remplace la liste des 3 parcours en tête de sidebar : il
affiche l'espace actif et ouvre la liste des trois espaces (identité seule,
sans état de possession — cf. ADR 0028 § « le commutateur navigue, il ne
vend pas »). Chaque espace porte sa couleur de filière via --filiere. */
.dash-space-switcher {
position: relative;
margin: 0 12px 10px;
}
/* Les couleurs de filière (--filiere, --filiere-soft, --filiere-line,
--filiere-strong, --filiere-ink) vivent dans css/pm-tokens.css (source de
vérité unique — ADR 0039), chargé AVANT ce fichier par dashboard.html. */
.dash-space-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 12px;
border: 1px solid #2f2f2f;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
color: var(--dash-sidebar-text);
cursor: pointer;
text-align: left;
transition: background 0.12s, border-color 0.12s;
}
.dash-space-toggle:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #3a3a3a;
}
.dash-space-toggle:focus-visible {
outline: 2px solid var(--filiere, var(--dash-accent));
outline-offset: 2px;
}
.dash-space-toggle__chip,
.dash-space-option__chip {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--filiere);
background: var(--filiere-soft);
box-shadow: inset 0 0 0 1px var(--filiere-line);
}
.dash-space-toggle__chip svg,
.dash-space-option__chip svg {
display: block;
}
/* Icône de filière tintée par masque : la forme vient du SVG, la couleur du
background (= couleur de filière). */
.dash-space-chip-ico {
display: block;
width: 30px;
height: 30px;
background: var(--filiere);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.dash-space-toggle__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.2;
}
.dash-space-toggle__kicker {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dash-sidebar-muted);
}
.dash-space-toggle__label {
font-size: 1rem;
font-weight: 650;
color: var(--dash-sidebar-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-space-toggle__caret {
flex-shrink: 0;
display: flex;
align-items: center;
opacity: 0.9;
}
.dash-space-toggle__caret svg {
display: block;
transition: transform 0.18s;
}
.dash-space-toggle[aria-expanded="true"] .dash-space-toggle__caret svg {
transform: rotate(180deg);
}
.dash-space-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
padding: 6px;
background: #1c1c1c;
border: 1px solid #333;
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
gap: 2px;
}
.dash-space-menu[hidden] {
display: none;
}
/* Déroulement : fondu + léger glissement vers le bas à l'ouverture (fermeture
instantanée). L'animation rejoue à chaque fois que le menu quitte [hidden]. */
@keyframes dashSpaceMenuIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dash-space-menu:not([hidden]) {
animation: dashSpaceMenuIn 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.dash-space-menu:not([hidden]) {
animation: none;
}
}
.dash-space-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 10px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
text-align: left;
color: var(--dash-sidebar-text);
position: relative;
transition: background 0.12s;
}
.dash-space-option:hover {
background: rgba(255, 255, 255, 0.05);
}
.dash-space-option[aria-selected="true"] {
background: rgba(255, 255, 255, 0.04);
}
.dash-space-option[aria-selected="true"]::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--filiere);
}
.dash-space-option__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.2;
}
.dash-space-option__label {
font-size: 0.9rem;
font-weight: 600;
}
.dash-space-option__arme {
font-size: 0.72rem;
color: var(--dash-sidebar-muted);
}
/* Le commutateur porte désormais l'identité de l'espace : les en-têtes de
parcours (summary) et les espaces non actifs sont masqués. */
.dash-nav-summary {
display: none;
}
.dash-nav-details[hidden] {
display: none;
}
/* --- Écran de choix d'espace (« page tampon », ADR 0028) ------------------
Invitation non bloquante affichée à un candidat sans espace possédé. */
.dash-space-choice {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(10, 10, 10, 0.72);
backdrop-filter: blur(3px);
}
.dash-space-choice[hidden] {
display: none;
}
/* Panneau CLAIR (validé) : cartes sombres posées sur fond clair, comme la
section doorways du staging (cartes sombres sur page claire). */
.dash-space-choice__panel {
position: relative;
width: 100%;
max-width: 1080px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: #ffffff;
color: #1f2733;
border: 1px solid #e8eaef;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(9, 20, 32, 0.35);
padding: 32px 28px 28px;
}
.dash-space-choice__close {
position: absolute;
top: 14px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #6b7682;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
border-radius: 8px;
}
.dash-space-choice__close:hover {
background: rgba(15, 23, 32, 0.06);
color: #1f2733;
}
.dash-space-choice__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
text-align: center;
}
.dash-space-choice__sub {
margin: 8px 0 22px;
text-align: center;
font-size: 0.86rem;
color: #6b7682;
}
.dash-space-choice__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Carte-image, style « doorway » de la vitrine PM : image plein cadre + teinte
de filière + scrim ; acronyme et pastille en haut, armée + « Préparer → » en bas. */
.dash-space-choice__card {
position: relative;
display: block;
height: 440px;
padding: 0;
border: 1px solid #333;
border-radius: 14px;
overflow: hidden;
background: #0d0d0d;
color: #fff;
cursor: pointer;
text-align: left;
transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
/* Survol : halo en anneau via box-shadow (mécanisme standard des focus rings).
Épouse l'arrondi par construction, bords doux → insensible aux arrondis de
sous-pixel des échelles Windows ; la bordure de la carte ne change jamais. */
.dash-space-choice__card:hover {
transform: translateY(-3px);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--filiere) 45%, transparent),
0 16px 32px rgba(9, 20, 32, 0.25);
}
.dash-space-choice__card:focus-visible {
outline: 2px solid var(--filiere);
outline-offset: 2px;
}
.dash-space-choice__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.dash-space-choice__card:hover .dash-space-choice__photo {
transform: scale(1.05);
}
/* Teinte NEUTRE bleu nuit (décision Bastien : aucun reflet coloré sur les photos ;
l'identité de filière reste sur le kicker, la pastille et « Préparer → »). */
.dash-space-choice__tint {
position: absolute;
inset: 0;
background: linear-gradient(155deg, rgba(7, 15, 24, 0.5), rgba(7, 15, 24, 0.9) 78%);
}
.dash-space-choice__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(7, 15, 24, 0.42), rgba(7, 15, 24, 0) 26%),
linear-gradient(to top, rgba(7, 15, 24, 0.93) 9%, rgba(7, 15, 24, 0.38) 44%, rgba(7, 15, 24, 0.05) 72%);
}
.dash-space-choice__top {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
}
.dash-space-choice__bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 24px;
}
.dash-space-choice__acro {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #eaf1f6;
}
.dash-space-choice__dot {
width: 12px;
height: 12px;
flex-shrink: 0;
border-radius: 50%;
background: var(--filiere);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--filiere) 25%, transparent);
}
.dash-space-choice__arme {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--filiere);
}
.dash-space-choice__blurb {
margin: 12px 0 0;
font-size: 0.95rem;
line-height: 1.55;
color: #a9bac8;
}
.dash-space-choice__foot {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(234, 241, 246, 0.16);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dash-space-choice__rail {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 11.5px;
color: #a9bac8;
}
.dash-space-choice__go {
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: var(--filiere);
white-space: nowrap;
}
@media (max-width: 760px) {
.dash-space-choice__grid {
grid-template-columns: 1fr;
}
.dash-space-choice__card {
height: 400px;
}
}
/* ——— View panels ——— */
.view-panel {
display: none;
animation: dashFade 0.25s ease;
}
.view-panel.active {
display: block;
}
@keyframes dashFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content-card {
background: var(--dash-bg-card);
border-radius: var(--dash-radius);
box-shadow: var(--dash-shadow-card);
overflow: hidden;
margin-bottom: 20px;
}
/* Sticky des colonnes LMS : pas d’overflow hidden sur le conteneur (sinon position:sticky ne s’applique pas). */
.content-card.lms-layout {
overflow: visible;
}
.content-card__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid #eef0f4;
}
.content-card__head h2 {
margin: 0;
font-size: 1.05rem;
font-weight: 650;
}
.content-card__body {
padding: 24px;
}
.content-card__lead {
margin: 0 0 20px;
font-size: 0.9rem;
color: #6b7280;
max-width: 52ch;
}
#view-psychotechnique .content-card__lead {
max-width: none;
}
#view-anglais .content-card__lead {
max-width: none;
}
/* ——— Test cards grid ——— */
.test-card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
/* Psychotechnique : 2 cartes par ligne, cartes plus grandes */
.test-card-grid--psych {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 640px) {
.test-card-grid--psych {
grid-template-columns: 1fr;
}
}
.test-card-grid--psych .test-card {
flex: none;
max-width: none;
min-height: 140px;
padding: 22px 24px;
}
#anglais-actions.test-card-grid--psych .test-card {
grid-column: 1 / -1;
}
/* Hubs Conseils & Connaissances : cartes type psycho sans icône (design hub
CA) — texte aligné en haut ; le cadenas des rubriques verrouillées, qui
vivait dans le bloc icône, s'ancre au coin haut-droit de la carte
(l'id l'emporte sur les règles .test-card--pm-locked de pm-paywall.css). */
#pm-lms-hub-grid .test-card--psych .test-card__main {
justify-content: flex-start;
}
#pm-lms-hub-grid .test-card--pm-locked {
position: relative;
}
#pm-lms-hub-grid .test-card--pm-locked .pm-lock-badge {
bottom: auto;
top: 12px;
right: 12px;
}
/* Numérotation des rubriques : compteur CSS pur sur les cartes rendues — une
rubrique masquée ne génère pas d'élément, la séquence reste donc continue. */
#pm-lms-hub-grid {
counter-reset: pm-hub-rubric;
}
#pm-lms-hub-grid .test-card--psych {
counter-increment: pm-hub-rubric;
position: relative; /* ancre le disque de complétion (et le cadenas des verrouillées) */
}
#pm-lms-hub-grid .test-card--psych .test-card__main::before {
content: counter(pm-hub-rubric, decimal-leading-zero);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
color: #9ca3af;
}
/* Disque de complétion (coin haut-droit) : anneau qui se remplit selon
--pm-progress (pages cochées / pages de la rubrique). Jamais sur une carte
verrouillée (le cadenas .pm-lock-badge y occupe déjà ce coin) — le numéro
::before, lui, reste en haut-GAUCHE du texte : les trois cohabitent. */
.lms-progress-disc {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background: conic-gradient(
var(--filiere, var(--dash-accent-soft)) calc(var(--pm-progress, 0) * 360deg),
#e5e7eb calc(var(--pm-progress, 0) * 360deg)
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
pointer-events: none;
}
/* Rubrique entièrement terminée : disque plein + coche (pas d'anneau évidé). */
.lms-progress-disc--complete {
background: var(--filiere, var(--dash-accent-soft));
-webkit-mask: none;
mask: none;
}
/* Rubrique entièrement terminée : teinte douce de la carte à la couleur de
l'espace (fond --filiere-soft + liseré --filiere-line), en écho au disque. */
#pm-lms-hub-grid .test-card--pm-complete {
background: var(--filiere-soft, rgba(107, 76, 154, 0.15));
border-color: var(--filiere-line, var(--dash-accent-soft));
}
.test-card__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.test-card__icon {
position: relative;
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--dash-accent);
opacity: 0.92;
}
.test-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.test-card__icon .ca-lock-badge--freemium svg {
width: 11px;
height: 11px;
}
.test-card {
flex: 1 1 200px;
max-width: 280px;
min-height: 100px;
padding: 18px 20px;
border-radius: var(--dash-radius-sm);
border: 1px solid #e8eaef;
background: #fafbfc;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
/* Après .test-card : texte à gauche, icône à droite (spécificité > .test-card seul) */
.test-card.test-card--psych {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.test-card.test-card--psych:hover .test-card__icon {
opacity: 1;
color: #d44a3a;
}
.test-card:hover {
border-color: var(--filiere-line, var(--dash-accent-soft));
box-shadow: 0 4px 14px var(--filiere-soft, rgba(107, 76, 154, 0.12));
transform: translateY(-1px);
}
.test-card.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
/* Cartes cliquables (ex. hub Connaissances) : même apparence que les liens .test-card */
button.test-card {
font: inherit;
width: 100%;
cursor: pointer;
text-align: left;
appearance: none;
-webkit-appearance: none;
}
button.test-card::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Hubs Connaissances & Sport : cartes type psycho sans icône — texte aligné en haut */
#connaissances-hub-grid .test-card--psych .test-card__main,
#sport-hub-grid .test-card--psych .test-card__main {
justify-content: flex-start;
}
.test-card__title {
font-weight: 650;
font-size: 0.95rem;
}
.test-card__desc {
margin: 0;
font-size: 0.85rem;
line-height: 1.45;
color: #4b5563;
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.test-card--psych .test-card__desc {
flex: 0 1 auto;
}
.test-card__meta {
font-size: 0.78rem;
color: #6b7280;
margin-top: auto;
padding-top: 4px;
}
.test-card--psych .test-card__main .test-card__meta {
margin-top: 6px;
}
.test-card[data-slot='cubes'] {
order: 1;
}
.test-card[data-slot='rotation'] {
order: 2;
}
.test-card[data-slot='math'] {
order: 3;
}
.test-card[data-slot='attention'] {
order: 4;
}
.test-card[data-slot='french'] {
order: 5;
}
.test-card[data-slot='codage'] {
order: 6;
}
.test-card[data-slot='other'] {
order: 40;
}
#anglais-actions .test-card[data-slot='anglais-retex'] {
order: 1;
}
#anglais-actions .test-card[data-slot='anglais-entrainement'] {
order: 2;
}
.psych-others-wrap {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #eef0f4;
}
.psych-others-wrap.hidden {
display: none;
}
.psych-section__title--first {
margin-top: 0;
}
.psych-section__title {
margin: 20px 0 16px;
font-size: 0.85rem;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.psych-others-wrap h3 {
margin: 0 0 16px;
font-size: 0.85rem;
font-weight: 600;
color: #6b7280;
}
/* ——— Placeholder views ——— */
.placeholder-view {
text-align: center;
padding: 48px 24px;
color: #6b7280;
font-size: 0.95rem;
}
/* ——— Settings ——— */
.settings-card__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.settings-card__lead {
margin: 0;
color: #4b5563;
font-size: 0.9rem;
line-height: 1.5;
}
.settings-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.settings-form__row {
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-form__row label {
font-size: 0.85rem;
color: #374151;
font-weight: 600;
}
.settings-form__row input[type='password'] {
border: 1px solid #d1d5db;
border-radius: var(--dash-radius-sm);
padding: 10px 12px;
font-size: 0.9rem;
color: #111827;
background: #fff;
}
.settings-form__row input[type='password']:focus {
outline: 2px solid rgba(107, 76, 154, 0.2);
border-color: var(--dash-accent-soft);
}
.settings-form__row--checkbox label {
display: flex;
align-items: flex-start;
gap: 8px;
font-weight: 500;
}
.settings-form__row--checkbox input[type='checkbox'] {
margin-top: 2px;
accent-color: var(--dash-accent-soft);
}
.settings-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.settings-inline-link {
font-size: 0.85rem;
color: var(--dash-accent-soft);
text-decoration: underline;
text-underline-offset: 2px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
text-align: left;
}
.settings-kv {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.settings-kv__row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 10px;
align-items: baseline;
font-size: 0.9rem;
}
.settings-kv__row dt {
color: #6b7280;
}
.settings-kv__row dd {
margin: 0;
color: #111827;
font-weight: 600;
}
.settings-message {
margin: 0;
min-height: 1.25em;
font-size: 0.85rem;
color: #6b7280;
}
.settings-message--ok {
color: #166534;
}
.settings-message--err {
color: #991b1b;
}
.settings-legal-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.settings-legal-links a {
color: #374151;
text-decoration: underline;
text-underline-offset: 2px;
font-size: 0.9rem;
}
.settings-separator {
width: 100%;
border: none;
border-top: 1px solid #e5e7eb;
margin: 2px 0;
}
.settings-danger-title {
margin: 0;
font-size: 1rem;
}
.settings-danger-lead {
margin: 0;
color: #6b7280;
font-size: 0.88rem;
}
.settings-btn-danger {
border-color: #b91c1c;
background: #b91c1c;
color: #fff;
}
.settings-btn-danger:hover {
border-color: #991b1b;
background: #991b1b;
}
.settings-card--danger .content-card__head h2 {
color: #7f1d1d;
}
/* ——— Statistiques (modèle jauge + dépli porté de Concours Armée — ADR 0039) ———
Une ligne dépliable par épreuve : jauge « classement moyen sur les 10 derniers
essais » + chevron ; au dépli, sparkline SVG + liste des tentatives. L'accent
est la filière de l'espace (pm-tokens.css) ; l'app étant claire, les éléments
porteurs d'information (jauge, barres, trait, points, chiffres) utilisent
--accent-strong (≥ 3:1 graphique, ≥ 4,5:1 texte), les remplissages --accent-soft. */
.dash-eyebrow {
flex: 0 0 100%;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.69rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-strong);
}
.dash-eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: var(--accent);
}
.stats-container {
width: 100%;
}
.stat-group + .stat-group {
margin-top: 28px;
}
.stat-group-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 12px;
}
.stat-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.stat-item {
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--surface-card);
overflow: hidden;
}
.stat-item.is-open {
border-color: var(--accent);
}
.stat-head {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 16px 18px;
border: 0;
background: transparent;
color: var(--text-primary);
cursor: pointer;
text-align: left;
font: inherit;
}
.stat-head:hover {
background: var(--surface-card-hover);
}
.stat-name {
flex: 0 0 auto;
min-width: 150px;
font-size: 1rem;
font-weight: 650;
}
.stat-gauge-wrap {
flex: 1;
min-width: 60px;
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-gauge {
width: 100%;
height: 8px;
background: var(--surface-inset);
border-radius: var(--radius-pill);
overflow: hidden;
}
.stat-gauge-caption {
display: none;
text-align: center;
font-size: 0.75rem;
line-height: 1.3;
color: var(--text-muted);
}
.stat-item.is-open .stat-gauge-caption {
display: block;
}
.stat-gauge > span {
display: block;
height: 100%;
background: var(--accent-strong);
border-radius: var(--radius-pill);
}
.stat-avg {
flex: 0 0 auto;
min-width: 3.5ch;
text-align: right;
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 600;
color: var(--accent-strong);
}
.stat-chev {
flex: 0 0 auto;
display: inline-flex;
color: var(--text-muted);
transition: transform 0.18s ease;
}
.stat-item.is-open .stat-chev {
transform: rotate(180deg);
}
.stat-detail {
display: none;
padding: 0 18px 18px;
border-top: 1px solid var(--border-subtle);
}
.stat-item.is-open .stat-detail {
display: block;
}
.stat-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
padding-top: 18px;
}
.stat-col-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 12px;
}
.stat-chart-svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
.stat-chart-grid {
stroke: var(--border-subtle);
stroke-width: 1;
}
.stat-chart-axis {
fill: var(--text-muted);
font-size: 9px;
font-family: var(--font-mono);
}
.stat-chart-area {
fill: var(--accent-soft);
stroke: none;
}
.stat-chart-spark {
fill: none;
stroke: var(--accent-strong);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.stat-chart-dot {
fill: var(--accent-strong);
stroke: var(--surface-card);
stroke-width: 1.5;
}
.stat-attempts {
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
overflow: hidden;
max-height: 264px;
overflow-y: auto;
}
.stat-attempt {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
}
.stat-attempt + .stat-attempt {
border-top: 1px solid var(--border-subtle);
}
.stat-attempt.is-latest {
background: var(--accent-soft);
}
.stat-attempt-date {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-secondary);
white-space: nowrap;
}
.stat-attempt-bar {
flex: 1;
height: 6px;
background: var(--surface-inset);
border-radius: var(--radius-pill);
overflow: hidden;
min-width: 40px;
}
.stat-attempt-bar > span {
display: block;
height: 100%;
background: var(--accent-strong);
border-radius: var(--radius-pill);
}
.stat-attempt-score {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
min-width: 4ch;
text-align: right;
}
.stat-attempt.is-latest .stat-attempt-score {
color: var(--accent-strong);
}
.stat-attempts-empty {
margin: 0;
padding: 14px;
color: var(--text-muted);
font-size: 0.85rem;
}
@media (max-width: 720px) {
.stat-detail-grid {
grid-template-columns: 1fr;
}
.stat-name {
min-width: 0;
}
}
/* ——— Hidden legacy ——— */
#sectionQuiz {
display: none !important;
}
/* ——— Connaissances LMS ——— */
.lms-hub-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.lms-hub-btn {
flex: 1 1 200px;
justify-content: center;
}
.lms-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
min-height: min(70vh, 720px);
padding: 0;
overflow: visible;
}
.lms-lesson-nav {
flex: 0 0 260px;
max-width: 100%;
align-self: flex-start;
position: sticky;
/* header + padding du .dash-main : même ligne de départ qu’au repos → pas de saut au scroll */
top: calc(var(--dash-header-offset) + var(--dash-main-pad-top));
min-height: calc(100vh - var(--dash-header-offset) - var(--dash-main-pad-top));
max-height: calc(100vh - var(--dash-header-offset) - var(--dash-main-pad-top));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 40;
border-right: 1px solid #eef0f4;
background: #fafbfc;
display: flex;
flex-direction: column;
}
/* Barre sommaire mobile : visible uniquement < 900px (voir media query). */
.lms-toc-toggle {
display: none;
}
.lms-lesson-nav__head {
padding: 16px 16px 12px;
border-bottom: 1px solid #eef0f4;
display: flex;
flex-direction: column;
gap: 10px;
}
.lms-lesson-nav__title {
margin: 0;
font-size: 0.85rem;
font-weight: 700;
color: #111827;
line-height: 1.3;
}
.lms-back-hub {
align-self: flex-start;
font-size: 0.8rem;
padding: 6px 12px;
}
/* ——— Sommaire de la zone (accordéon de rubriques) ——— */
.lms-zone-toc {
list-style: none;
margin: 0;
padding: 8px 0 16px;
overflow-y: auto;
flex: 1;
}
.lms-zone-toc li {
margin: 0;
}
.lms-rubric-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
text-align: left;
padding: 10px 16px;
border: none;
background: transparent;
border-left: 3px solid transparent;
font-size: 0.85rem;
font-weight: 600;
color: #111827;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.lms-rubric-toggle:hover {
background: rgba(15, 23, 42, 0.04);
}
.lms-rubric-toggle__label {
flex: 1;
min-width: 0;
}
.lms-rubric-toggle__chevron {
display: inline-flex;
flex-shrink: 0;
color: #9ca3af;
transition: transform 0.15s;
}
.lms-rubric-toggle[aria-expanded='true'] .lms-rubric-toggle__chevron {
transform: rotate(90deg);
}
/* Rubrique de la page en cours : marquée même repliée */
.lms-toc-rubric--active > .lms-rubric-toggle {
border-left-color: var(--dash-accent);
color: var(--dash-accent);
}
/* Verrouillée : clic → dialog d'achat, jamais de dépliage */
.lms-rubric-toggle--locked .lms-rubric-toggle__label {
opacity: 0.55;
}
/* .pm-lock-badge (pm-paywall.css) n'est stylé que sous .test-card--pm-locked —
même redéfinition du cercle qu'en Retex, ici en inline dans la rangée flex. */
.lms-rubric-toggle--locked .pm-lock-badge {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #141414;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.lms-rubric-pages {
list-style: none;
margin: 0;
padding: 0 0 6px;
}
/* Pages en retrait sous leur rubrique */
.lms-rubric-pages .lms-page-link {
padding-left: 32px;
}
.lms-toc-empty {
padding: 2px 16px 10px 32px;
font-size: 0.8rem;
color: #6b7280;
}
.lms-page-link {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
width: 100%;
text-align: left;
padding: 10px 16px;
border: none;
background: transparent;
font-size: 0.85rem;
color: #4b5563;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lms-page-link:hover {
background: rgba(15, 23, 42, 0.04);
color: #111827;
}
.lms-page-link--active {
color: var(--dash-accent);
font-weight: 600;
background: rgba(232, 93, 76, 0.06);
border-left-color: var(--dash-accent);
}
.lms-main {
flex: 1;
min-width: 0;
padding: 20px 24px 32px;
overflow: visible;
}
.lms-breadcrumb {
font-size: 0.78rem;
color: #6b7280;
margin-bottom: 10px;
line-height: 1.4;
}
.lms-article__title {
margin: 0 0 10px;
font-size: 1.45rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.2;
}
.lms-article__body {
font-size: 0.95rem;
line-height: 1.5;
color: #374151;
}
.lms-article__body p {
margin: 0 0 0.55em;
}
/* Paragraphes « vides » Quill (
) : moins d’air entre blocs */
.lms-article__body p:has(> br:only-child) {
margin: 0.15em 0;
min-height: 0;
line-height: 1.2;
}
.lms-article__body .ql-align-center {
text-align: center;
}
.lms-article__body .ql-align-right {
text-align: right;
}
.lms-article__body .ql-align-justify {
text-align: justify;
}
.lms-article__body h1 {
margin: 0 0 0.45em;
color: #111827;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.25;
letter-spacing: 0.02em;
}
.lms-article__body h2,
.lms-article__body h3,
.lms-article__body h4 {
margin: 0.75em 0 0.3em;
color: #111827;
font-weight: 650;
line-height: 1.28;
}
.lms-article__body h2 {
font-size: 1.15rem;
}
.lms-article__body h3 {
font-size: 1.05rem;
}
.lms-article__body ul,
.lms-article__body ol {
margin: 0 0 0.55em 1.25rem;
padding: 0;
}
.lms-article__body li {
margin: 0 0 0.2em;
}
.lms-article__body img {
display: block;
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 0.45em auto;
}
/* Rangée d'images côte à côte (galeries d'attachments migrées de SchoolMaker).
Sur écran étroit, les images repassent les unes sous les autres. */
.lms-article__body .lms-img-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
margin: 0.45em 0;
}
.lms-article__body .lms-img-row img {
flex: 1 1 220px;
min-width: 0;
margin: 0;
}
/* Blocs vidéo YouTube (marqueur admin → iframe injectée au rendu) */
.lms-article__body .lms-youtube-embed {
position: relative;
width: 100%;
max-width: 720px;
margin: 0.65em auto;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
background: #0f0f0f;
}
.lms-article__body .lms-youtube-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.lms-article__body a {
color: var(--dash-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Bloc « Documents à télécharger » en fin de leçon (Conseils / Connaissances).
Pièces jointes PDF structurées — voir docs/adr/0014. */
.lms-downloads {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.lms-downloads__title {
margin: 0 0 0.85rem;
font-size: 0.95rem;
font-weight: 600;
color: #374151;
}
.lms-downloads__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.lms-downloads__link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
width: fit-content;
max-width: 100%;
text-decoration: none;
color: #374151;
}
.lms-downloads__link:hover {
color: var(--dash-accent);
}
.lms-downloads__link svg {
flex: 0 0 auto;
color: #9ca3af;
}
.lms-downloads__link:hover svg {
color: var(--dash-accent);
}
.lms-downloads__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Bouton « Marquer comme terminé » en fin de leçon (coche MANUELLE, décochable ;
progression par compte — get/set-pm-lms-page-progress.php). */
.lms-complete {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
/* Un bloc « Documents à télécharger » visible porte déjà le filet + la marge :
on évite alors le double séparateur. */
.lms-downloads:not([hidden]) + .lms-complete {
margin-top: 1.25rem;
padding-top: 0;
border-top: none;
}
.lms-complete-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 1.1rem;
border-radius: var(--dash-radius-sm);
border: 1px solid var(--filiere-line, var(--dash-accent-soft));
background: #fff;
color: #374151;
font: inherit;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lms-complete-btn__icon {
display: inline-flex;
color: var(--filiere, var(--dash-accent-soft));
}
.lms-complete-btn:hover {
border-color: var(--filiere, var(--dash-accent-soft));
box-shadow: 0 2px 10px var(--filiere-soft, rgba(107, 76, 154, 0.15));
}
/* État coché : fond teinté filière + coche colorée, texte sombre (lisible sur
les trois filières, contrairement au blanc sur or/olive). */
.lms-complete-btn.is-done {
background: var(--filiere-soft, rgba(107, 76, 154, 0.15));
border-color: var(--filiere-line, var(--dash-accent-soft));
color: #1f2937;
}
.lms-complete-btn:focus-visible {
outline: 2px solid var(--filiere, var(--dash-accent-soft));
outline-offset: 2px;
}
/* Coche d'une page terminée dans le sommaire (à droite du libellé). */
.lms-page-link__check {
flex: 0 0 auto;
display: inline-flex;
color: var(--filiere, var(--dash-accent-soft));
}
.lms-article__body blockquote {
margin: 0.55em 0;
padding: 8px 14px;
border-left: 3px solid #e5e7eb;
background: #f9fafb;
color: #4b5563;
}
.lms-article__body pre,
.lms-article__body code {
font-family: ui-monospace, monospace;
font-size: 0.88em;
}
.lms-article__body pre {
margin: 0.55em 0;
overflow-x: auto;
padding: 10px 12px;
background: #1e293b;
color: #e2e8f0;
border-radius: 8px;
}
.lms-empty-hint {
margin: 0;
color: #6b7280;
font-size: 0.92rem;
line-height: 1.55;
}
/* Échec de chargement d'une offre du catalogue (fetchQuizzesForOffer) : la section
reste visible avec ce message sobre plutôt que de se masquer, indiscernable d'un
catalogue vide légitime. */
.catalog-load-notice {
margin: 0;
padding: 12px 4px;
color: #6b7280;
font-size: 0.92rem;
line-height: 1.55;
}
/* ——— Sport LMS ——— */
/* Intro sous le titre des hubs (Sport, Connaissances, …) — même mise en forme */
.dash-hub-intro {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid #eef0f4;
font-size: 0.95rem;
line-height: 1.55;
color: #374151;
}
/* Intro non renseignée en admin : ne pas décaler la grille pour rien */
.dash-hub-intro:empty {
display: none;
}
.dash-hub-intro p {
margin: 0 0 0.55em;
}
.dash-hub-intro p:last-child {
margin-bottom: 0;
}
/* ——— Retex : bibliothèque vidéo (ADR 0029) ——— */
.retex-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.retex-card {
display: flex;
flex-direction: column;
border-radius: var(--dash-radius-sm);
border: 1px solid #e8eaef;
background: #fafbfc;
overflow: hidden;
text-align: left;
cursor: pointer;
padding: 0;
font: inherit;
color: inherit;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.retex-card::-moz-focus-inner {
border: 0;
padding: 0;
}
.retex-card:hover {
border-color: var(--filiere-line, var(--dash-accent-soft));
box-shadow: 0 4px 14px var(--filiere-soft, rgba(107, 76, 154, 0.12));
transform: translateY(-1px);
}
.retex-card:focus-visible {
outline: 2px solid var(--dash-accent-soft);
outline-offset: 2px;
}
.retex-card--locked {
opacity: 0.7;
}
.retex-card__thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #14161c;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.retex-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.retex-card__thumb-placeholder {
color: #6b7280;
display: flex;
}
/* .pm-lock-badge (pm-paywall.css) n'est stylé que sous .test-card--pm-locked —
les cartes Retex n'ont pas cette classe, on redéfinit le cercle ici. */
.retex-card--locked .pm-lock-badge {
position: absolute;
bottom: 8px;
right: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #141414;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.retex-card__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(0, 0, 0, 0.18);
}
.retex-card__play svg {
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
.retex-card__duration {
/* Coin bas-GAUCHE (le cadenas .pm-lock-badge occupe le bas-droit sur une
carte verrouillée) : les deux badges ne doivent jamais se superposer. */
position: absolute;
left: 8px;
bottom: 8px;
padding: 2px 7px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.retex-card__body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px 16px;
}
.retex-card__title {
font-weight: 650;
font-size: 0.95rem;
}
.retex-card__desc {
margin: 0;
font-size: 0.85rem;
line-height: 1.45;
color: #4b5563;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.retex-reader__top {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.retex-reader__top .lms-breadcrumb {
margin: 0;
}
.retex-reader__title {
margin: 0 0 16px;
font-size: 1.3rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.25;
}
.retex-reader__player {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--dash-radius-sm);
background: #000;
margin-bottom: 20px;
}
.retex-reader__player iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.retex-reader__desc {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: #374151;
max-width: 68ch;
white-space: pre-line;
}
@media (max-width: 640px) {
.retex-grid {
grid-template-columns: 1fr;
}
}
.sport-program-intro-card .content-card__body {
padding-top: 8px;
}
.sport-intro-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.sport-intro-article {
margin-bottom: 8px;
}
.sport-intro-program-progress {
margin: 20px 0 8px;
padding: 14px 16px;
border-radius: var(--dash-radius-sm);
background: #f9fafb;
border: 1px solid #eef0f4;
}
.sport-intro-program-progress__label {
margin: 0 0 10px;
font-size: 0.82rem;
font-weight: 650;
color: #374151;
}
.sport-intro-weeks-title {
margin: 24px 0 6px;
font-size: 1.05rem;
font-weight: 700;
color: #111827;
}
.sport-intro-weeks-lead {
margin: 0 0 14px;
font-size: 0.9rem;
color: #6b7280;
line-height: 1.45;
}
.sport-intro-week-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 12px;
}
.sport-intro-week-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px 12px 14px;
border: 1px solid #e5e7eb;
border-radius: var(--dash-radius-sm);
background: #fff;
box-shadow: var(--dash-shadow-card);
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.sport-intro-week-card:hover {
border-color: var(--filiere-line, var(--dash-accent-soft));
box-shadow: 0 2px 8px var(--filiere-soft, rgba(107, 76, 154, 0.12));
}
.sport-intro-week-card:focus-visible {
outline: 2px solid var(--dash-accent-soft);
outline-offset: 2px;
}
.sport-intro-week-card__title {
font-size: 0.95rem;
font-weight: 700;
color: #111827;
}
.sport-intro-week-card__phase {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
}
.sport-intro-week-card__bar {
margin: 0;
}
.sport-intro-week-card__bar .sport-progress__label {
min-width: 2.75rem;
}
.sport-intro-week-card__meta {
font-size: 0.78rem;
color: #4b5563;
}
.sport-lms-week-nav__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sport-dash-nav-btn {
font-size: 0.78rem;
padding: 6px 10px;
}
.sport-lms-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
min-height: min(70vh, 720px);
padding: 0;
overflow: visible;
}
.sport-lms-week-nav {
flex: 0 0 200px;
max-width: 100%;
align-self: flex-start;
position: sticky;
top: calc(var(--dash-header-offset) + var(--dash-main-pad-top));
min-height: calc(100vh - var(--dash-header-offset) - var(--dash-main-pad-top));
max-height: calc(100vh - var(--dash-header-offset) - var(--dash-main-pad-top));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 40;
border-right: 1px solid #eef0f4;
background: #fafbfc;
display: flex;
flex-direction: column;
}
.sport-lms-week-nav__head {
padding: 16px 14px 12px;
border-bottom: 1px solid #eef0f4;
display: flex;
flex-direction: column;
gap: 10px;
}
.sport-lms-week-nav__title {
margin: 0;
font-size: 0.85rem;
font-weight: 700;
color: #111827;
line-height: 1.3;
}
.sport-lms-week-list {
list-style: none;
margin: 0;
padding: 8px 10px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sport-lms-week-link {
display: block;
width: 100%;
text-align: center;
padding: 8px 6px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
font-size: 0.8rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sport-lms-week-link:hover {
background: rgba(107, 76, 154, 0.08);
border-color: var(--dash-accent-soft);
color: #111827;
}
.sport-lms-main {
flex: 1;
min-width: 0;
padding: 20px 24px 32px;
}
.sport-lms-status {
min-height: 1.25em;
margin: 0 0 10px;
font-size: 0.85rem;
color: #b45309;
}
.sport-lms-program-head {
margin-bottom: 20px;
}
.sport-lms-program-title {
margin: 0 0 12px;
font-size: 1.45rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.2;
}
.sport-lms-mount {
display: flex;
flex-direction: column;
gap: 10px;
}
.sport-lms-error {
margin: 0;
padding: 14px 16px;
border-radius: var(--dash-radius-sm);
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
font-size: 0.92rem;
line-height: 1.5;
}
.sport-lms-error p {
margin: 0 0 0.5em;
}
.sport-lms-error p:last-child {
margin-bottom: 0;
}
.sport-week {
border: 1px solid #e5e7eb;
border-radius: var(--dash-radius);
background: var(--dash-bg-card);
box-shadow: var(--dash-shadow-card);
overflow: hidden;
}
.sport-week > summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
background: #f9fafb;
border-bottom: 1px solid #eef0f4;
}
.sport-week > summary::-webkit-details-marker {
display: none;
}
.sport-week__title {
font-size: 1rem;
font-weight: 700;
color: #111827;
flex: 0 0 auto;
}
.sport-week[open] > summary {
border-bottom-color: #e5e7eb;
}
.sport-session {
padding: 16px 18px 18px;
border-top: 1px solid #f3f4f6;
}
.sport-session:first-of-type {
border-top: none;
}
.sport-session__head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}
.sport-session__head input[type='checkbox'] {
width: 1.15rem;
height: 1.15rem;
margin-top: 3px;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--dash-accent-soft);
}
.sport-session__label {
font-size: 1rem;
font-weight: 650;
color: #111827;
line-height: 1.35;
cursor: pointer;
user-select: none;
}
.sport-session__body {
padding-left: calc(1.15rem + 12px);
}
.sport-progress {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 160px;
min-width: 120px;
}
.sport-progress--program {
max-width: 420px;
}
.sport-progress__track {
flex: 1;
height: 8px;
border-radius: 999px;
background: #e5e7eb;
overflow: hidden;
}
.sport-progress__fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--dash-accent-soft), var(--dash-accent));
transition: width 0.2s ease;
}
.sport-progress__label {
font-size: 0.78rem;
font-weight: 600;
color: #6b7280;
flex: 0 0 auto;
min-width: 2.5rem;
text-align: right;
}
.sport-progress--week .sport-progress__track {
height: 6px;
}
.sport-progress--week .sport-progress__label {
font-size: 0.72rem;
}
/* ——— Responsive ——— */
@media (max-width: 900px) {
:root {
--dash-main-pad-top: 16px;
/* Le header est replié dans le menu : la barre « espace + Menu » colle en haut. */
--dash-header-offset: 0px;
}
/* Header replié dans le menu (avatar + email + déconnexion en pied de menu déplié) :
une seule ligne réservée en haut d'écran, celle du commutateur + hamburger. */
.dash-header {
display: none;
}
.lms-layout {
flex-direction: column;
min-height: 0;
}
.lms-lesson-nav {
flex: none;
width: 100%;
border-right: none;
border-bottom: 1px solid #eef0f4;
min-height: 0;
/* Replié par défaut : barre fine sticky calée sous la barre de nav mobile,
dont dashboard.js mesure la hauteur (--pm-mobile-topbar). La lecture
occupe l'écran ; le sommaire reste à un tap (ADR 0041, pattern hamburger). */
top: var(--pm-mobile-topbar, 0px);
max-height: none;
overflow: visible;
}
/* Déplié : borné à l'écran, scroll interne. */
.lms-lesson-nav.is-open {
max-height: calc(100vh - var(--pm-mobile-topbar, 0px));
overflow-y: auto;
}
.lms-toc-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 12px 14px;
border: none;
background: none;
font: inherit;
font-size: 0.9rem;
font-weight: 650;
color: #111827;
cursor: pointer;
text-align: left;
}
.lms-toc-toggle__icon {
display: flex;
align-items: center;
color: #6b7280;
}
.lms-toc-toggle__chevron {
margin-left: auto;
display: flex;
align-items: center;
color: #6b7280;
transition: transform 0.15s ease;
}
.lms-lesson-nav.is-open .lms-toc-toggle__chevron {
transform: rotate(180deg);
}
/* Replié : seule la barre reste ; déplié, tête (titre + Retour) et rubriques réapparaissent. */
.lms-lesson-nav:not(.is-open) > :not(.lms-toc-toggle) {
display: none;
}
.lms-zone-toc {
padding: 4px 0 8px;
}
.lms-rubric-toggle {
padding: 10px 14px;
}
/* Pages en chips horizontales sous la rubrique dépliée */
.lms-rubric-pages {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
padding: 0 12px 10px;
}
.lms-rubric-pages li {
flex: 1 1 auto;
}
.lms-page-link,
.lms-rubric-pages .lms-page-link {
border-left: none;
border-bottom: 2px solid transparent;
padding: 8px 12px;
border-radius: 6px;
}
.lms-page-link--active {
border-left: none;
border-bottom-color: var(--dash-accent);
}
.lms-toc-empty {
padding: 0 14px 10px;
}
.dash-layout {
flex-direction: column;
}
.dash-sidebar {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 12px;
border-right: none;
border-bottom: 1px solid #2a2a2a;
min-height: 0;
/* Replié par défaut : le menu ne réserve plus ~½ écran, le contenu est
visible d'emblée (pattern hamburger porté de Concours Armée). */
max-height: none;
}
/* Déplié (hamburger ouvert) : borné à l'écran avec scroll interne (overflow-y:auto du bloc de base). */
.dash-sidebar.is-open {
max-height: calc(100vh - var(--dash-header-offset));
}
/* Replié, la barre n'a jamais de scroll interne : on rend l'overflow visible pour
que le menu du commutateur d'espaces (position:absolute) flotte PAR-DESSUS le
contenu au lieu d'être clippé par l'overflow-y:auto du bloc de base. */
.dash-sidebar:not(.is-open) {
overflow: visible;
}
/* Ligne repliée : le commutateur d'espaces reste visible à côté du bouton
Menu — l'espace est le contexte majeur de PM, on ne le cache pas. */
.dash-space-switcher {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.dash-sidebar__toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 0 auto;
margin-left: 12px;
padding: 12px 14px;
border: 1px solid #2f2f2f;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
color: var(--dash-sidebar-text);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.dash-sidebar__toggle:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #3a3a3a;
}
.dash-sidebar__toggle-icon {
display: flex;
align-items: center;
justify-content: center;
}
/* Replié : ne restent que le commutateur et le bouton Menu ;
déplié (.is-open) : tout le menu réapparaît. */
.dash-sidebar:not(.is-open) > :not(.dash-sidebar__toggle):not(.dash-space-switcher) {
display: none;
}
/* Déplié : de l'air entre la ligne commutateur + Menu et les entrées de nav. */
.dash-sidebar.is-open .dash-space-switcher,
.dash-sidebar.is-open .dash-sidebar__toggle {
margin-bottom: 10px;
}
/* Pied de menu compte (déplié uniquement — replié, la règle générique le masque). */
.dash-sidebar-account {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 6px;
padding: 10px 4px 2px;
border-top: 1px solid #2a2a2a;
}
.dash-sidebar-account__email {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.82rem;
color: var(--dash-sidebar-muted);
}
.dash-sidebar-account__logout {
flex: 0 0 auto;
padding: 9px 14px;
border: 1px solid #2f2f2f;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
color: var(--dash-sidebar-text);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.dash-sidebar-account__logout:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #3a3a3a;
}
.dash-sidebar__label {
width: 100%;
padding: 8px 12px 4px;
}
.dash-nav-item,
.dash-nav-summary {
padding: 8px 12px;
width: auto;
flex: 1 1 auto;
}
.dash-nav-details {
width: 100%;
}
.dash-nav-sub {
flex-direction: row;
flex-wrap: wrap;
}
.dash-nav-sub a {
padding: 6px 12px;
font-size: 0.82rem;
}
.dash-sidebar__footer {
width: 100%;
text-align: center;
}
/* Liens légaux du menu déplié. Le format du rail (à la file, séparés par « · », en
0.6rem) est taillé pour une COLONNE ÉTROITE de 260 px ; ici le menu occupe toute
la largeur et ce motif n'a plus lieu d'être. Trois libellés en 0.6rem, ce sont
surtout trois cibles tactiles minuscules, sur la seule voie d'accès PERMANENTE aux
pages légales. Remède mesuré le 03/08 au format cinq liens, CONSERVÉ ici : chaque
lien reçoit une vraie surface de touche, le texte reprend la taille du pied de menu
(0.7rem — la réduction ne sert que le rail, la place ne manque pas ici), et le « · »
cède la place au gap : deux séparateurs à la fois feraient double emploi.
⚠️ `display: flex` est REDÉCLARÉ — depuis le passage du rail au format en ligne, la
règle de base n'est plus un conteneur flex, et wrap/gap/justify seraient inertes
sans lui. Même remède, même bloc, que `.dash-nav-sub` quelques règles plus haut. */
.dash-sidebar__footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 14px;
font-size: 0.7rem;
}
.dash-sidebar__footer-links a {
display: inline-block;
padding: 9px 4px;
}
.dash-sidebar__footer-links a:not(:last-child)::after {
content: none;
}
.dash-sidebar-upgrade {
width: 100%;
margin: 8px 0 0;
}
.dash-main {
padding: 16px;
}
.dash-header__email {
display: none;
}
/* Sur mobile l’email est masqué : l’avatar expose l’adresse au survol / lecteur d’écran */
.dash-avatar[title] {
cursor: default;
}
.sport-lms-layout {
flex-direction: column;
min-height: 0;
}
.sport-lms-week-nav {
flex: none;
width: 100%;
border-right: none;
border-bottom: 1px solid #eef0f4;
min-height: 0;
max-height: min(40vh, calc(100vh - var(--dash-header-offset) - var(--dash-main-pad-top)));
position: relative;
top: auto;
}
.sport-lms-week-list {
flex-direction: row;
flex-wrap: wrap;
}
.sport-lms-week-link {
flex: 1 1 calc(25% - 4px);
}
.sport-session__body {
padding-left: 0;
}
}
/* Urgence — au-dessus des autres bandeaux, rouge, tous profils */
.ca-emergency-banner[hidden] {
display: none !important;
}
.ca-emergency-banner {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 10px 20px;
box-sizing: border-box;
text-align: center;
font-size: 15px;
line-height: 1.45;
font-weight: 600;
background: #fef2f2;
color: #991b1b;
border-bottom: 1px solid #fecaca;
}
/* Freemium — bandeau pleine largeur viewport (sous le header) */
/* L’attribut hidden doit primer sur display:block (sinon barre vide pour les comptes payants). */
.ca-freemium-banner[hidden] {
display: none !important;
}
.ca-freemium-banner {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 10px 20px;
box-sizing: border-box;
text-align: center;
font-size: 15px;
background: #e8f4ff;
color: #0b3d6d;
border-bottom: 1px solid #cfe2ff;
}
.ca-freemium-banner.ca-freemium-banner--cta {
background: #fff3cd;
color: #664d03;
border-bottom-color: #ffecb5;
}
.ca-freemium-banner__link {
appearance: none;
border: none;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
padding: 0;
}
.ca-freemium-banner__link:hover {
opacity: 0.85;
}
.ca-freemium-banner__link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 3px;
}
/* Bandeau invité — même palette que freemium « tests restants », CTA renforcé */
.ca-guest-signup-banner[hidden] {
display: none !important;
}
.ca-checkout-banner[hidden] {
display: none !important;
}
.ca-checkout-banner {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 10px 20px;
box-sizing: border-box;
text-align: center;
font-size: 14px;
background: #ecfdf5;
color: #065f46;
border-bottom: 1px solid #a7f3d0;
}
.ca-checkout-banner.ca-checkout-banner--warn {
background: #fef3c7;
color: #92400e;
border-bottom-color: #fde68a;
}
.lms-page-link__label {
flex: 1;
min-width: 0;
text-align: left;
}
/* Clic → modale / vente : curseur invitant, pas « interdit » */
.lms-page-link.lms-page-link--locked {
cursor: pointer;
}
.lms-page-link.lms-page-link--locked .lms-page-link__label {
opacity: 0.55;
}
/* Badge cadenas freemium (cercle sombre + picto blanc) */
.ca-lock-badge.ca-lock-badge--freemium {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #111827;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ca-lock-badge.ca-lock-badge--freemium svg {
display: block;
}
.test-card--ca-locked .test-card__icon > svg:first-of-type {
opacity: 0.42;
}
.test-card--ca-locked .test-card__icon .ca-lock-badge--freemium {
position: absolute;
top: -5px;
right: -5px;
z-index: 1;
}
.test-card--ca-locked:not(.test-card--psych) {
position: relative;
}
.test-card--ca-locked:not(.test-card--psych) .ca-lock-badge--freemium {
position: absolute;
top: 10px;
right: 10px;
}
#nav-psych-sub.dash-nav-sub a.dash-nav-sub-link--ca-locked {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-right: 14px;
}
.sport-intro-week-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sport-week__title-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
}
.sport-lms-week-link__row {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.sport-week.sport-week--locked {
opacity: 0.45;
}
.sport-week.sport-week--locked .sport-week__summary {
cursor: not-allowed;
}
/* ——— Zone Contact (ADR 0036) — commune aux trois espaces ———
Port de la version refondue Concours Armée (html/css/dashboard.css), adaptée
au thème clair PM. L'accent est la couleur de FILIÈRE de l'espace actif :
variables --filiere* héritées de body[data-space], repli --dash-accent-soft
tant que le profil n'a pas posé l'espace. La pastille non-lu reste ROUGE dans
tous les espaces : signal d'attention, pas décoration de filière. */
/* L'entrée Contact est transverse au compte (ADR 0036) : hors des
d'espace dans le DOM, elle garde le style premier niveau .dash-nav-item, et
le trait ::before la sépare du menu de l'espace, qui change avec le
commutateur alors qu'elle reste. Même spécificité que .dash-nav-item
(défini plus haut) : l'ordre du fichier fait gagner ces règles. */
.dash-nav-item--contact {
position: relative;
margin-top: 13px;
}
.dash-nav-item--contact::before {
content: "";
position: absolute;
top: -7px;
left: 20px;
right: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.dash-nav-item--contact.active {
color: var(--dash-accent);
font-weight: 600;
background: rgba(232, 93, 76, 0.08);
}
/* En nav mobile horizontale, un trait « au-dessus » n'a plus de sens. */
@media (max-width: 900px) {
.dash-nav-item--contact {
margin-top: 0;
font-size: 0.82rem;
}
.dash-nav-item--contact::before {
display: none;
}
}
.dash-nav-unread-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.dash-nav-unread-badge[hidden] {
display: none !important;
}
.contact-card__body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
height: clamp(480px, 68vh, 680px);
}
.contact-list {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px;
background: #fff;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.contact-list__head h3 {
margin: 4px 0 10px;
font-size: 14px;
}
.contact-list__items {
display: grid;
gap: 8px;
/* Tasse les cartes en haut : sans ça, une grille avec peu de fils étire
ses lignes pour remplir la hauteur bornée (align-content stretch par
défaut) et chaque carte gonfle. Même correctif que .contact-thread__messages. */
align-content: start;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.contact-conv-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px;
text-align: left;
background: #fff;
cursor: pointer;
display: grid;
gap: 3px;
min-width: 0;
}
.contact-conv-item.active {
border-color: var(--filiere, var(--dash-accent-soft));
background: var(--filiere-soft, rgba(107, 76, 154, 0.12));
}
/* Boutons « Nouvelle conversation » et « Envoyer » : teinte de filière, mais
ADOUCIE. L'aplat plein était trop criard à côté du reste de PM, où la couleur
de filière n'habille que des icônes, des disques et des liserés — jamais une
grande surface. On la mélange donc à du blanc pour obtenir un pastel, avec le
texte sombre (--filiere-ink) et un liseré --filiere-line qui garde l'objet
lisible comme un bouton plutôt que comme une étiquette.
Portée sous body[data-space] : tant que l'espace n'est pas posé, le bouton
garde le violet de .dash-btn--primary et son texte blanc, sans acrobatie de
repli (les variables de filière vont par paire, elles sont là ou absentes
ensemble). */
body[data-space] .contact-new-btn,
body[data-space] .contact-send-btn {
background: color-mix(in srgb, var(--filiere) 55%, #fff);
border-color: var(--filiere-line);
color: var(--filiere-ink);
}
body[data-space] .contact-new-btn:hover,
body[data-space] .contact-send-btn:hover {
/* Se densifie un peu au survol (affordance), sans revenir au criard. */
background: color-mix(in srgb, var(--filiere) 70%, #fff);
border-color: var(--filiere);
filter: none;
}
.contact-new-btn {
width: 100%;
margin: 0 0 10px;
font-weight: 600;
}
.contact-new-btn.active {
outline: 2px solid var(--filiere, var(--dash-accent-soft));
outline-offset: 1px;
}
.contact-title-row {
display: grid;
gap: 6px;
margin-bottom: 8px;
}
.contact-title-row[hidden] {
display: none !important;
}
.contact-title-row__label {
font-size: 12px;
font-weight: 600;
color: #374151;
}
.contact-conv-item__title {
font-weight: 600;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-conv-item__preview {
color: #4b5563;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-conv-item__badge {
justify-self: end;
background: #ef4444;
color: #fff;
border-radius: 999px;
font-size: 11px;
min-width: 18px;
padding: 2px 6px;
}
.contact-thread {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px;
min-height: 0;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 12px;
}
.contact-thread__header {
font-weight: 600;
}
/* Mode brouillon : le formulaire de rédaction occupe tout le panneau
(titre en haut, grand champ message, actions en bas) ; le faux fil disparaît. */
.contact-thread--draft {
grid-template-rows: auto 1fr;
}
.contact-thread--draft .contact-thread__messages {
display: none;
}
.contact-thread--draft .contact-thread__composer {
display: flex;
flex-direction: column;
min-height: 0;
}
.contact-thread--draft .contact-thread__composer textarea {
flex: 1;
min-height: 240px;
/* Une longue liste de conversations étire le panneau : sans plafond, le champ
suit et repousse le bouton Envoyer hors de vue. */
max-height: 520px;
resize: none;
}
.contact-thread__messages {
border: 1px solid #eceff4;
border-radius: 8px;
padding: 10px;
overflow: auto;
min-height: 0;
display: grid;
gap: 10px;
/* Empile les messages en haut : sans ça, une bulle seule s'étire sur
toute la hauteur de la zone (align-content stretch par défaut). */
align-content: start;
align-items: start;
}
.contact-msg {
border-radius: 10px;
padding: 8px 10px;
max-width: 82%;
border: 1px solid transparent;
}
.contact-msg p {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* Bulles du candidat : teinte de filière de l'espace ACTIF (jamais celle de
l'espace de naissance du fil — décision ADR 0036). */
.contact-msg--mine {
justify-self: end;
background: var(--filiere-soft, rgba(107, 76, 154, 0.12));
border-color: var(--filiere-line, rgba(107, 76, 154, 0.35));
}
.contact-msg--theirs {
justify-self: start;
background: #f4f6f8;
border-color: #e5e7eb;
}
.contact-msg__meta {
color: #6b7280;
font-size: 11px;
margin-bottom: 6px;
}
.contact-msg img {
max-width: 240px;
border-radius: 6px;
border: 1px solid #ddd;
}
.contact-thread__composer textarea,
.contact-thread__composer input[type='text'] {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 9px 10px;
font: inherit;
font-size: 14px;
color: #111827;
background: #fff;
}
.contact-thread__composer input[type='text'] {
margin-bottom: 8px;
}
.contact-thread__composer textarea {
resize: vertical;
}
.contact-thread__composer textarea:focus,
.contact-thread__composer input[type='text']:focus {
outline: none;
border-color: var(--filiere, var(--dash-accent-soft));
box-shadow: 0 0 0 2px var(--filiere-soft, rgba(107, 76, 154, 0.15));
}
.contact-thread__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
.contact-attach {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Input fichier natif masqué : déclenché via le label « Joindre une image ». */
.contact-attach__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.contact-attach__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
color: #4b5563;
font-size: 13px;
cursor: pointer;
}
.contact-attach__btn:hover {
background: #f9fafb;
color: #111827;
}
.contact-attach__input:focus-visible + .contact-attach__btn {
outline: 2px solid var(--filiere, var(--dash-accent-soft));
outline-offset: 2px;
}
.contact-attach__chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 160px;
padding: 4px 4px 4px 10px;
border: 1px solid #e5e7eb;
border-radius: 999px;
background: #f4f6f8;
color: #4b5563;
font-size: 12px;
}
.contact-attach__chip[hidden] {
display: none !important;
}
.contact-attach__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-attach__clear {
border: 0;
background: transparent;
color: #9ca3af;
font-size: 16px;
line-height: 1;
padding: 0 4px;
cursor: pointer;
}
.contact-attach__clear:hover {
color: #111827;
}
.contact-empty {
color: #6b7280;
font-size: 13px;
margin: 0;
}
@media (max-width: 1000px) {
.contact-card__body {
grid-template-columns: 1fr;
height: auto;
}
.contact-list,
.contact-thread {
min-height: 0;
overflow: visible;
}
.contact-list__items {
overflow-y: visible;
}
}
/* ——— Header invité / connecté (mutuellement exclusifs) ——— */
/* Ne pas utiliser display:contents sur le wrapper user : avec [hidden], les
enfants peuvent rester visibles comme flex items du header (bug navigateur). */
#dashHeaderGuestActions[hidden],
#dashHeaderUserActions[hidden] {
display: none !important;
}
.dash-header__guest:not([hidden]) {
display: flex;
align-items: center;
gap: 10px;
}
.dash-header__user:not([hidden]) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
}
/* ——— Modal auth dashboard ——— */
.ca-dash-auth-dialog {
max-width: calc(100vw - 32px);
width: 420px;
padding: 0;
border: none;
border-radius: var(--dash-radius);
box-shadow: var(--dash-shadow-card), 0 12px 40px rgba(0, 0, 0, 0.12);
}
.ca-dash-auth-dialog::backdrop {
background: rgba(15, 15, 20, 0.45);
}
.ca-dash-auth-dialog__inner {
position: relative;
padding: 24px 24px 22px;
}
.ca-dash-auth-dialog__close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: transparent;
font-size: 1.35rem;
line-height: 1;
color: #6b7280;
cursor: pointer;
}
.ca-dash-auth-dialog__close:hover {
background: #f3f4f6;
color: #111;
}
.ca-dash-auth-dialog__title {
margin: 0 32px 8px 0;
font-size: 1.2rem;
font-weight: 650;
}
.ca-dash-auth-dialog__hint {
margin: 0 0 16px;
font-size: 0.875rem;
color: #6b7280;
line-height: 1.45;
}
.ca-dash-auth-tabs {
display: flex;
gap: 0;
margin-bottom: 18px;
border-bottom: 1px solid #e8eaef;
}
.ca-dash-auth-tab {
flex: 1;
padding: 10px 12px;
border: none;
background: transparent;
font-size: 0.9rem;
font-weight: 600;
color: #6b7280;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.ca-dash-auth-tab--active {
color: var(--dash-accent);
border-bottom-color: var(--dash-accent);
}
.ca-dash-auth-panel {
display: none;
}
.ca-dash-auth-panel.ca-dash-auth-panel--active {
display: block;
}
.ca-dash-auth-reset[hidden] {
display: none !important;
}
.ca-dash-auth-reset:not([hidden]) {
display: block;
}
.ca-dash-auth-field {
margin-bottom: 14px;
}
.ca-dash-auth-field label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.ca-dash-auth-field input {
width: 100%;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: var(--dash-radius-sm);
font-size: 0.95rem;
}
.ca-dash-auth-forgot {
margin: 0 0 14px;
}
.ca-dash-auth-linkbtn {
border: none;
background: none;
padding: 0;
font-size: 0.85rem;
color: var(--dash-accent-soft);
text-decoration: underline;
cursor: pointer;
}
.ca-dash-auth-submit {
width: 100%;
margin-top: 4px;
}
.ca-dash-auth-err {
margin-top: 12px;
padding: 10px 12px;
border-radius: var(--dash-radius-sm);
background: #fef2f2;
color: #991b1b;
font-size: 0.875rem;
}
.ca-dash-auth-success {
margin-top: 12px;
padding: 10px 12px;
border-radius: var(--dash-radius-sm);
background: #ecfdf5;
color: #065f46;
font-size: 0.875rem;
}
.ca-dash-auth-recaptcha {
margin: 12px 0;
}
.ca-dash-auth-recaptcha-msg {
margin: 0 0 10px;
font-size: 0.8rem;
color: #92400e;
}
/* ============================================================
Bandeau d'état du compte (ADR 0045, lot A)
------------------------------------------------------------
Trois emplois, un seul gabarit : invitation à s'inscrire pour
l'invité, solde de tests d'essai et épuisement pour un compte
dont l'espace courant n'est pas possédé. Placé au-dessus des
vues, il survit à la navigation.
LARGEUR : le bandeau prend toute la zone de contenu, sans le
max-width qui borne les cartes (.dash-main > .view-panel) — il
s'étend donc plus large qu'elles, comme le bandeau freemium de
Concours Armée. Un bandeau d'état parle de l'accès au produit,
pas du contenu de la vue : il ne s'aligne pas sur la carte.
Teinte : --accent* (identité de l'espace courant, thème général
hors espace) — jamais une couleur en dur, cf. pm-tokens.css.
============================================================ */
.pm-dash-banner:not([hidden]) {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
width: 100%;
margin: 0 0 20px;
padding: 14px 18px;
border: 1px solid var(--accent-line);
border-left-width: 4px;
border-radius: var(--radius-md);
background: var(--accent-soft);
}
.pm-dash-banner__text {
flex: 1 1 260px;
min-width: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-primary);
}
.pm-dash-banner__title {
display: block;
font-weight: 600;
}
.pm-dash-banner__lead {
color: var(--text-secondary);
}
/* Un titre ou une phrase vide ne doit pas consommer d'espace : les états n'ont
pas tous les deux lignes (cf. le piège [hidden] documenté en fin de fichier —
ces deux sélecteurs ne posent pas de display, la garde reste bon marché). */
.pm-dash-banner__title[hidden],
.pm-dash-banner__lead[hidden] {
display: none;
}
/* Une à deux actions, dans l'ordre de la hiérarchie (principale d'abord). */
.pm-dash-banner__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.pm-dash-banner__cta {
flex: 0 0 auto;
min-height: 42px;
padding: 10px 20px;
border: none;
border-radius: var(--radius-md);
background: var(--accent-strong);
color: #fff;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s;
}
.pm-dash-banner__cta[hidden] {
display: none;
}
.pm-dash-banner__cta:hover {
filter: brightness(1.08);
}
.pm-dash-banner__cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Action SECONDAIRE (bouton fantôme) : « Se connecter » à côté de « Créer mon
compte ». Même gabarit, poids visuel moindre — la hiérarchie tient au
remplissage, pas à la taille. L'accent de filière n'est ici qu'un trait et
un texte, jamais un aplat sous du texte (charte Briefing). */
.pm-dash-banner__cta--ghost {
background: transparent;
border: 1px solid var(--accent-strong);
color: var(--accent-strong);
}
.pm-dash-banner__cta--ghost:hover {
filter: none;
background: var(--accent-soft);
}
/* Action DISCRÈTE (lien) : le déblocage quand il reste des essais — le bandeau
informe, il ne pousse pas encore à l'achat (modèle du lien doré de CA). */
.pm-dash-banner__cta--quiet {
min-height: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
color: var(--accent-strong);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.pm-dash-banner__cta--quiet:hover {
filter: none;
text-decoration-thickness: 2px;
}
/* Le bloc compte du menu mobile n'a, en invité, qu'un bouton à porter. */
.dash-sidebar-account--guest {
justify-content: center;
}
/* ============================================================
[hidden] doit VRAIMENT masquer (ADR 0045, lot A)
------------------------------------------------------------
`display: none` du user-agent pour [hidden] est battu par
n'importe quelle règle auteur posant un display. Ces deux
sélecteurs portent `display: flex` : sans les règles
ci-dessous, poser l'attribut hidden en JavaScript ne masque
rien du tout — le mode invité laissait ainsi « Contact » dans
le menu et le bloc compte dans le menu mobile.
Piège attrapé par les tests E2E, PAS par une vérification qui
se contente de relire l'attribut en JavaScript : l'attribut
était bien posé, c'est le rendu qui l'ignorait.
============================================================ */
.dash-nav-item[hidden] {
display: none;
}
@media (max-width: 900px) {
.dash-sidebar-account[hidden] {
display: none;
}
}