/* Plateforme d'évaluation — identité visuelle « D · Surligneur ».
   Feuille commune aux deux interfaces. Elle ne porte que des jetons et les
   composants partagés; chaque page garde ensuite ses règles propres.

   Règle d'usage des couleurs : le bleu signale ce qu'on peut faire — bouton
   principal, question active, lien. L'ambre transparent signale ce qu'on regarde
   ou ce qui demande vérification — le volet en cours, un volet sans réponse, une
   copie en silence, une copie rédigée sur deux postes. Rien d'autre n'est coloré,
   à une exception près, dite plus bas. */

:root{
  /* Fond et structure */
  --bg-academic-canvas:#F9F8F6;
  --surface:#FFFFFF;
  --border-subtle:#E2E1DE;
  --border-control:#C9C7C2;

  /* Texte */
  --text-academic-primary:#2D3142;
  --text-academic-secondary:#424A52;

  /* Accents */
  --accent-scholarly-blue:#115DA9;
  --accent-scholarly-blue-hover:#0B4580;
  --accent-muted-amber:#D99B26;
  --highlight:rgba(217,155,38,.15);
  --highlight-strong:rgba(217,155,38,.28);
  /* La bande du logotype, plus dense que les surlignages de l'interface :
     elle doit tenir derrière des lettres en gras sans les voiler. */
  --highlight-logo:rgba(217,155,38,.45);

  /* L'exception à la règle : une épreuve a des états qu'il faut pouvoir lire
     d'un coup d'œil. Le rouge ne sert qu'à ce qui a échoué ou expiré, le vert
     qu'à confirmer un enregistrement. Ni l'un ni l'autre ne décore. */
  --text-alert:#9B2C1F;
  --text-ok:#1F6B3A;

  /* Typographie */
  --font-serif:'Merriweather',Georgia,serif;
  --font-answer:Georgia,'Merriweather',serif;
  --font-ui:'Merriweather Sans','Segoe UI',sans-serif;

  --radius-control:6px;
  --radius-card:8px;

  /* L'agrandissement du texte, commandé par la personne étudiante : il porte sur
     l'énoncé comme sur la réponse. 1 par défaut. */
  --zoom:1;
  --zoomUI:1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background-color:var(--bg-academic-canvas); color:var(--text-academic-primary);
  font-family:var(--font-ui); line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:var(--accent-scholarly-blue); text-decoration-color:var(--border-subtle)}
a:hover{color:var(--accent-scholarly-blue-hover)}
:focus-visible{outline:2px solid var(--accent-scholarly-blue); outline-offset:2px}
button,input,textarea,select{font:inherit; color:inherit}

/* ---------- logotype Dictus ---------- */
/* Le trait de surligneur est dessiné à la main, incliné, les bouts coupés en
   biais : il ne se recompose pas en CSS. Le logo s'emploie donc toujours comme
   image. Trois fichiers : l'en-tête, les grandes tailles, et la version blanche
   pour fond bleu. On ne les étire ni ne les recadre. */
.dictus-logo{display:block; width:auto; height:28px}
.dictus-logo.grand{height:76px}

/* ---------- surtitre ---------- */
.surtitre{font-family:var(--font-ui); font-size:calc(13px * var(--zoomUI)); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--accent-scholarly-blue);
  margin:0 0 .5rem}
.surtitre.calme{color:var(--text-academic-secondary)}

/* ---------- titres ---------- */
h1,h2,h3{font-family:var(--font-serif); font-weight:700; line-height:1.2}

/* ---------- boutons ---------- */
.bouton{min-height:48px; border-radius:var(--radius-control); cursor:pointer;
  font-family:var(--font-ui); font-weight:700; font-size:calc(15px * var(--zoomUI));
  padding:.6rem 1.15rem; background:var(--accent-scholarly-blue); color:#fff;
  border:1px solid var(--accent-scholarly-blue); display:inline-flex;
  align-items:center; justify-content:center; gap:.45rem; text-decoration:none}
.bouton:hover{background:var(--accent-scholarly-blue-hover);
  border-color:var(--accent-scholarly-blue-hover)}
.bouton.principal{min-height:56px; font-size:calc(18px * var(--zoomUI)); padding:.7rem 1.5rem}
.bouton.secondaire{background:var(--surface); color:var(--accent-scholarly-blue);
  border-color:var(--accent-scholarly-blue)}
.bouton.secondaire:hover{background:var(--bg-academic-canvas);
  color:var(--accent-scholarly-blue-hover); border-color:var(--accent-scholarly-blue-hover)}
.bouton.petit{min-height:44px; font-size:calc(14px * var(--zoomUI)); padding:.4rem .8rem}
.bouton:disabled{opacity:.42; cursor:not-allowed}
.bouton.remise{background:var(--accent-scholarly-blue); border-color:var(--accent-scholarly-blue)}
/* Une seule action détruit quelque chose : elle se distingue sans crier. */
.bouton.danger{background:var(--surface); color:var(--text-alert); border-color:var(--text-alert)}
.bouton.danger:hover{background:var(--surface); color:#7d2318; border-color:#7d2318}
.lienuni{background:none; border:none; color:var(--accent-scholarly-blue);
  text-decoration:underline; cursor:pointer; font:inherit; padding:0}
.lienuni:hover{color:var(--accent-scholarly-blue-hover)}

/* ---------- champs ---------- */
input[type=text],input[type=number],input[type=date],input[type=time],input[type=email],
input[type=password],input:not([type]),textarea,select{
  border:1px solid var(--border-control); border-radius:var(--radius-control);
  padding:14px 16px; background:var(--surface); font-family:var(--font-ui);
  font-size:calc(15px * var(--zoomUI)); color:var(--text-academic-primary)}
input:focus,textarea:focus,select:focus{border:2px solid var(--accent-scholarly-blue);
  padding:13px 15px; outline:none}
label{font-family:var(--font-ui); font-size:calc(14px * var(--zoomUI)); font-weight:700}
.champgros{font-size:calc(24px * var(--zoomUI)) !important; letter-spacing:.04em}

/* ---------- cartes ---------- */
.carte,.plaque{background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card)}

/* ---------- engagement ---------- */
/* Le bloc surligné dit : voici ce que vous déclarez avant d'entrer. */
.engagement{background:var(--highlight); border-radius:var(--radius-control);
  padding:14px 16px; display:flex; gap:.7rem; align-items:flex-start;
  font-size:calc(15px * var(--zoomUI)); line-height:1.5; cursor:pointer}
.engagement input{accent-color:var(--accent-scholarly-blue); width:1.15rem; height:1.15rem;
  flex:none; margin:.15rem 0 0; padding:0; border-radius:3px; border-width:1px}
.engagement input:focus{padding:0; border-width:1px}

/* ---------- surligneur ---------- */
/* Le surlignage appartient à la personne qui lit. Il reste dans son navigateur :
   rien n'est envoyé au serveur, rien n'est joint à la copie.

   Quatre teintes, parce qu'on lit un énoncé de droit en séparant les faits des
   dates, la question posée du bruit. Elles sont toutes transparentes et pâles :
   l'encre garde au moins 8,8:1 de contraste sur chacune, sur fond blanc comme
   sur fond crème. Aucune ne sert ailleurs dans l'interface, de sorte que le
   bleu de l'action et l'ambre de l'attention gardent leur sens. */
:root{
  --surligne-ambre:rgba(217,155,38,.28);
  --surligne-vert:rgba(106,168,79,.30);
  --surligne-rose:rgba(201,78,120,.25);
  --surligne-bleu:rgba(60,120,200,.25);
}
mark.surligne{background:var(--surligne-ambre); color:inherit; padding:0 1px;
  border-radius:2px}
mark.surligne[data-teinte="vert"]{background:var(--surligne-vert)}
mark.surligne[data-teinte="rose"]{background:var(--surligne-rose)}
mark.surligne[data-teinte="bleu"]{background:var(--surligne-bleu)}

.cache{display:none !important}