/* Habillage uniquement : l'agencement reste porté par les templates d'origine.
   Les jetons de couleur et de police résident dans src/input.css. */
body.interface-moderne:not(.interface-connexion) { letter-spacing:normal; }
.interface-moderne:not(.interface-connexion) :is(.tracking-widest,.tracking-wide) { letter-spacing:normal; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete { background:#192832; color:#eef2f5; border-color:#32454f; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete > a { color:white; font-weight:700; letter-spacing:-.025em; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete :is(.text-ink,.text-muted,.text-faint) { color:#d1dce3; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete :is(.text-role,.text-role-dark) { color:#ffba91; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete .bg-role-soft { background:#32454f; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete .bg-role-border { color:#192832; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete nav a { color:#d1dce3; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete nav a[aria-current] { color:white; background:#32454f; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete nav a:hover { color:white; background:#32454f; }
/* Repère permanent pour choisir la séquence, même hors de l'entrée active. */
html body.interface-moderne.role-eleve .pilote-en-tete nav [data-bouton-sequence] { background:#effcf8; color:#123f38; }
html body.interface-moderne.role-eleve .pilote-en-tete nav [data-bouton-sequence] svg { color:inherit; }
html body.interface-moderne.role-eleve .pilote-en-tete nav [data-bouton-sequence]:focus-visible { outline-color:#f0b18d; }

.interface-moderne:not(.interface-connexion) .pilote-en-tete [aria-disabled] { background:#263943; color:#aebec8; border-color:#4a5e68; }
.interface-moderne:not(.interface-connexion) :is(a,button,summary,input,select,textarea):focus-visible { outline:3px solid #245b92; outline-offset:3px; }
.interface-moderne:not(.interface-connexion) .pilote-en-tete a:focus-visible { outline-color:#ffd0b3; }
.interface-moderne:not(.interface-connexion) .texte-aide { font-style:italic; color:#000; }
.interface-moderne:not(.interface-connexion) [data-ui="button"] { border-radius:8px; }
.interface-moderne:not(.interface-connexion) [data-ui="field"] { border-radius:8px; }
.interface-moderne .text-green-700 { color:#166534; }
.interface-moderne .pilote-evitement { display:block; position:fixed; top:-100px; left:20px; z-index:100; padding:12px 20px; background:white; color:#202b36; border:2px solid #245b92; }
.interface-moderne .pilote-evitement:focus { display:block; top:12px; }
@media (prefers-reduced-motion:reduce) {
 .interface-moderne *, .interface-moderne *::before, .interface-moderne *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Marqueurs historiques communs ; le lien d’évitement est réactivé ci-dessus. */
.pilote-evitement, .pilote-titre-eleves, .pilote-texte-etat, .pilote-initiales { display:none; }

/* Accès au compte — Le fil vivant, choix UI-003. */
body.interface-connexion { --login-ink:#193c37; --login-muted:#52615c; --login-paper:#fbfaf6; --login-accent:#20594e; background:var(--login-paper); color:var(--login-ink); }
.interface-connexion .pilote-en-tete { position:static; background:transparent; border:0; padding:24px 48px; min-height:88px; }
body.interface-connexion .pilote-en-tete > a.text-role { color:var(--login-ink); font-size:25px; letter-spacing:-.035em; overflow:visible; }
.interface-connexion .pilote-en-tete > a::before { content:""; width:27px; height:27px; border-radius:8px 8px 8px 2px; background:var(--login-accent); transform:rotate(-8deg); margin-right:12px; vertical-align:-3px; box-shadow:7px -7px 0 -2px #e9b599; }
.interface-connexion #contenu-principal { max-width:none!important; width:100%; padding:0!important; margin:0!important; }
.interface-connexion .connexion-formulaire { border:0; border-radius:0; box-shadow:none; padding:40px; background:transparent; width:100%; max-width:500px; justify-self:center; }
.interface-connexion .connexion-formulaire h1 { font-size:34px; font-weight:730; line-height:1.15; letter-spacing:-.045em; color:var(--login-ink); margin:0 0 12px; }
.interface-connexion .connexion-introduction { color:var(--login-muted); margin-bottom:28px; }
.interface-connexion .connexion-formulaire label { font-size:14px; font-weight:650; color:var(--login-ink); margin-bottom:8px; }
.interface-connexion .connexion-formulaire label span { font-size:11px; color:var(--login-muted); }
.interface-connexion .connexion-formulaire input:not([type=hidden]) { background:white; color:#193c37; border:1px solid #71857e; border-radius:10px; min-height:52px; font-size:16px; padding:13px 15px; }
.interface-connexion .connexion-formulaire input:has(+button[data-oeil]) { padding-right:52px; }
.interface-connexion .connexion-formulaire button[type=submit] { background:var(--login-accent); border:1px solid var(--login-accent); color:white; min-height:52px; font-weight:650; border-radius:10px; }
.interface-connexion .connexion-formulaire button[type=submit]:hover { background:#123f37; border-color:#123f37; }
.interface-connexion .connexion-formulaire button[type=submit][aria-disabled=true] { cursor:progress; background:#425e56; border-color:#425e56; opacity:1; }
.interface-connexion .connexion-formulaire a { color:#20594e; text-decoration:underline; text-underline-offset:4px; }
.interface-connexion .connexion-formulaire a[data-ui=button] { text-decoration:none; }
.interface-connexion .connexion-formulaire a[data-ui=button].bg-red-600 { background:#b4232f; color:white; border-color:#b4232f; min-height:44px; }
.interface-connexion .connexion-formulaire .texte-aide { font-size:13px; color:#263d35; }
.interface-connexion .connexion-formulaire .text-muted,
.interface-connexion .connexion-formulaire .text-gray-600 { color:var(--login-muted); }
.interface-connexion .connexion-formulaire button[data-oeil] { min-width:48px; min-height:48px; color:#425e56; border-radius:8px; }
.interface-connexion .connexion-formulaire .bg-red-50 { color:#991b1b; background:#fff1f0; border-color:#c67777; }
.interface-connexion .connexion-formulaire .text-red-600 { color:#991b1b; }
.interface-connexion .connexion-formulaire .bg-blue-50 { background:#edf4fb; color:#254b76; border-color:#7f9cb9; }
.interface-connexion .connexion-formulaire .bg-role-soft { background:#e9f2eb; color:#20594e; border-color:#78968c; }
.interface-connexion .connexion-formulaire [role=alert] { scroll-margin-top:24px; }
.interface-connexion .connexion-formulaire p { line-height:1.65; }
.interface-connexion .connexion-formulaire hr { border-color:#cbd2cb; margin:24px 0 18px; }
.interface-connexion :is(a,button,input,summary):focus-visible { outline:3px solid #245b92!important; outline-offset:4px; box-shadow:none; }
.interface-connexion #contenu-principal:focus { outline:none; }

.interface-connexion .app-shell { position:relative; min-height:0; }
body.interface-connexion #contenu-principal { display:flex; align-items:stretch; }
.interface-connexion .pilote-en-tete { position:absolute; top:0; left:0; z-index:2; width:48%; }
body.interface-connexion .pilote-en-tete > a.text-role { color:#f5f0df; }
.interface-connexion .pilote-en-tete > a::before { background:#cfe3c8; box-shadow:7px -7px 0 -2px #edb08b; }
.interface-connexion .pilote-en-tete a:focus-visible { outline-color:#f0b18d!important; }
.interface-connexion .connexion-cadre { grid-template-columns:minmax(0,.48fr) minmax(0,.52fr); gap:0; align-items:stretch; min-height:0; }
.interface-connexion .connexion-repere { background:#123f38; padding:112px 48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; text-align:center; position:relative; overflow:hidden; }
.interface-connexion .connexion-illustration { width:100%; max-width:490px; margin:0; }
.interface-connexion .connexion-formulaire { align-self:center; padding:56px 40px; }
body.interface-connexion { letter-spacing:normal; font-size:15px; line-height:1.55; }
.interface-connexion :is(.tracking-widest,.tracking-wide) { letter-spacing:normal; }
.interface-connexion .pilote-en-tete > a::before { display:inline-block; }
.interface-connexion .connexion-cadre { display:grid; width:100%; }
.interface-connexion .connexion-formulaire { min-width:0; }
.interface-connexion .connexion-formulaire > div { max-width:none; width:100%; margin:0; }
.interface-connexion .connexion-formulaire .bg-surface { background:transparent; border:0; padding:0; border-radius:0; box-shadow:none; }
.interface-connexion .connexion-formulaire form { margin-top:24px; }
.interface-connexion .connexion-formulaire button[type=submit] { padding:12px 18px; font-size:15px; letter-spacing:normal; }
.interface-connexion .connexion-repere h2 { width:100%; max-width:490px; color:#f6f0dd; font-size:clamp(26px,3.1vw,46px); line-height:1.16; letter-spacing:-.04em; font-weight:650; margin:0; }
.interface-connexion .connexion-promesse span { color:#cfe3c8; white-space:nowrap; }
@media(max-width:900px) {
 .interface-connexion .pilote-en-tete { position:static; width:100%; background:#123f38; padding:24px; min-height:80px; }
 .interface-connexion .connexion-cadre { grid-template-columns:1fr; min-height:0; max-width:none; align-content:start; }
 .interface-connexion .connexion-repere { padding:24px; }
 .interface-connexion .connexion-repere h2 { font-size:clamp(24px,5.8vw,32px); }
 .interface-connexion .connexion-illustration { display:none; }
 .interface-connexion .connexion-formulaire { padding:32px 24px 40px; max-width:480px; }
 .interface-connexion .connexion-formulaire h1 { font-size:28px; }
}
@media(max-width:370px) { .interface-connexion .connexion-formulaire { padding-inline:20px; } }

/* Composants partagés : styles de présentation sans logique métier. */
:where(.interface-connexion).interface-moderne [data-ui="page-header"] { flex-wrap:wrap; align-items:center; gap:16px; }
:where(.interface-connexion).interface-moderne [data-ui="page-header"] h1 { font-size:32px; line-height:1.2; font-weight:700; letter-spacing:-.035em; }
:where(.interface-connexion).interface-moderne [data-ui="button"] { min-height:44px; border-radius:8px; }
:where(.interface-connexion).interface-moderne [data-ui="field"] { min-height:44px; border-radius:8px; font-size:16px; }
:where(.interface-connexion).interface-moderne [data-ui="label"] { font-size:14px; line-height:1.5; }
:where(.interface-connexion).interface-moderne [data-ui="tabs"] { gap:4px; padding-bottom:8px; }
:where(.interface-connexion).interface-moderne [data-ui="tabs"] > a { min-height:44px; border-radius:7px; margin-bottom:0; }
:where(.interface-connexion).interface-moderne [data-ui="tabs"] > a[aria-selected="true"] { box-shadow:inset 0 -3px currentColor; }
:where(.interface-connexion).interface-moderne #crud-results > .overflow-hidden { overflow-x:auto; border:1px solid var(--color-line); border-radius:12px; box-shadow:none; }
:where(.interface-connexion).interface-moderne #crud-results table { font-size:14px; }
:where(.interface-connexion).interface-moderne #crud-results th { background:#edf2f5; color:#435460; }
:where(.interface-connexion).interface-moderne #crud-results :is(th,td) { border-color:var(--color-line); }
:where(.interface-connexion).interface-moderne #crud-results :is(button,a) { min-height:36px; }
:where(.interface-connexion).interface-moderne .app-main { min-width:0; }
:where(.interface-connexion).interface-moderne.role-eleve main#contenu-principal { max-width:none; padding:0; margin:0; }
@media(max-width:767px) {
 :where(.interface-connexion).interface-moderne [data-ui="page-header"] h1 { font-size:27px; }
 :where(.interface-connexion).interface-moderne [data-ui="page-header"] > a { white-space:normal; }
}

:where(.interface-connexion).interface-moderne .pilote-en-tete .bg-role-border { color:#192832; }
:where(.interface-connexion).interface-moderne .text-green-700 { color:#166534; }
@media (max-width:1100px) {
 :where(.interface-connexion).interface-moderne:not(.role-eleve) #contenu-principal { padding:24px; }
}
@media (max-width:767px) {
 :where(.interface-connexion).interface-moderne:not(.role-eleve) #contenu-principal { padding:24px 16px; }
}

/* Accueil élève : la palette de la connexion (Le fil vivant), accents de la
   charte du rôle conservés. Deux marqueurs : `accueil-eleve` sur /mon-travail
   sans activité ouverte (cartes des cours ou tableau de bord), et le partial des
   cartes, que la classe fermée reprend. Aucun effet dans une activité.
   Le CADRE vient de la connexion : papier, vert profond, encre verte, filets
   chauds. Les ACCENTS restent `--color-eleve` (liens, chiffres, courbe, bordure
   des cartes ouvertes), définis par la charte du rôle. Les couleurs
   d'état (validée, non validée, non évaluée) gardent leur sens. */
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) { --accueil-encre:#193c37; --accueil-sourdine:#52615c; --accueil-papier:#fbfaf6; --accueil-carte:#fffefb; --accueil-filet:#dcdfd5; background:var(--accueil-papier); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete { background:#123f38; border-color:#315c50; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete > a.text-role { color:#fbf2d7; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete > a.text-role::before { content:""; display:inline-block; width:18px; height:18px; margin-right:10px; vertical-align:-2px; border-radius:6px 6px 6px 2px; background:#cfe3c8; transform:rotate(-8deg); box-shadow:5px -5px 0 -2px #edb08b; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete .text-muted { color:#d5e8dc; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete .bg-role-soft { background:var(--color-role-soft); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete .text-role-dark { color:var(--color-role-dark); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete .bg-role-border { background:var(--color-role-border); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .pilote-en-tete a:focus-visible { outline-color:#f0b18d; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main :is(.text-ink,.text-black,h1,h2,h3) { color:var(--accueil-encre); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main main .text-muted { color:var(--accueil-sourdine); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main main .bg-surface { background:var(--accueil-carte); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main .border-line { border-color:var(--accueil-filet); }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main .rounded-card { border-radius:14px; }
body.role-eleve:has(:is(.accueil-eleve,.accueil-cours-eleve)) .app-main :is(h1,h2) { letter-spacing:-.02em; }