/* =========================================================
   Novalect, styles publics.

   Meme systeme de design que l'accueil, a la lettre : fond blanc,
   filets d'un pixel, aucune ombre portee, grands rayons, Montserrat,
   orange pour l'action et cinq couleurs franches pour les types.
   Les valeurs sont exactement celles de novalect-design.php et de
   console.css. Si la palette change, changer les trois.

   Tout est prefixe .novalect pour ne rien casser dans le theme.
   ========================================================= */

.novalect{
  --nv-ink:#0F172A;
  --nv-ink-2:#475569;
  --nv-muted:#5F6C7D;
  --nv-paper:#FFFFFF;
  --nv-soft:#F3F6FA;
  --nv-soft-2:#E9EEF5;
  --nv-line:#E4EAF1;
  --nv-accent:#EA580C;
  /* Fond orange portant du texte blanc. #EA580C ne donne que 3,56 contre
     le blanc, sous le seuil AA de 4,5. Cette teinte la, plus profonde,
     monte a 5,18 sans changer la couleur percue. */
  --nv-accent-2:#C2410C;
  --nv-warm:#FFF1E7;

  --nv-c-cours:#1D4ED8;
  --nv-c-td:#7C3AED;
  --nv-c-tp:#0D9488;
  --nv-c-tp-d:#0F766E;
  --nv-c-eval:#DC2626;
  --nv-c-sch:#DB2777;

  --nv-vert:#0D9488;
  --nv-vert-soft:#E3F5F3;
  --nv-bleu-soft:#E8EEFD;
  --nv-violet-soft:#F1EAFE;
  --nv-rouge:#DC2626;
  --nv-rouge-soft:#FDEBEB;

  --nv-r:14px;
  --nv-r-lg:20px;
  --nv-r-sm:10px;

  color:var(--nv-ink);
  line-height:1.55;
  letter-spacing:-.005em;

  /* La police est posee ici, sinon le catalogue et le referentiel sortent
     dans la police du theme alors que l'accueil est en Montserrat, et les
     deux pages n'ont plus l'air d'appartenir au meme site. */
  font-family:"Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
.novalect *{box-sizing:border-box}
.novalect h2,
.novalect h3{
  font-weight:600; letter-spacing:-.02em; line-height:1.2;
}
.novalect h2{font-size:1.35rem; margin:2.6rem 0 1rem}
.novalect h3{font-size:1.1rem; margin:2.4rem 0 .9rem}
.novalect p{margin:0 0 1rem}
.novalect img{display:block; max-width:100%}

/* ---------- boutons ----------
   Meme bouton que l'accueil : pastille sombre qui vire a l'orange.
   Les variantes sont declarees apres la base, sinon a specificite
   egale c'est la derniere regle ecrite qui gagne. */
/* Meme geometrie que .nv-btn du snippet et .nvc-btn du tableau de bord.
   Le bouton Envoyer pour validation du depot est celui la, il doit etre
   au pixel pres celui de la barre haute. */
.novalect .novalect-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--nv-ink); color:#FFF;
  border:0; border-radius:999px;
  padding:12px 22px; min-height:42px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.novalect .novalect-btn:hover{background:var(--nv-accent-2); color:#FFF}
.novalect .novalect-btn:active{background:var(--nv-accent-2)}

.novalect .novalect-btn--pri{background:var(--nv-accent-2); color:#FFF}
.novalect .novalect-btn--pri:hover{background:var(--nv-accent-3); color:#FFF}

.novalect .novalect-btn--out{
  background:none; color:var(--nv-ink);
  border:1.5px solid var(--nv-line); padding:10.5px 20.5px;
}
.novalect .novalect-btn--out:hover{background:var(--nv-ink); color:#FFF; border-color:var(--nv-ink)}

.novalect .novalect-btn--wa{background:#16A34A; color:#FFF}
.novalect .novalect-btn--wa:hover{background:#128040; color:#FFF}

.novalect .novalect-btn--lg{padding:15px 28px; font-size:1rem}
.novalect .novalect-btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- avis ---------- */
.novalect-avis{
  background:var(--nv-paper); border:1px solid var(--nv-line); border-radius:var(--nv-r);
  padding:16px 18px; margin:0 0 1.2rem;
  font-size:.94rem; color:var(--nv-ink-2); line-height:1.55;
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
}
.novalect-avis strong{color:var(--nv-ink); font-weight:600}
.novalect-avis--succes{background:var(--nv-vert-soft); border-color:transparent; color:#0B6B62}
.novalect-avis--erreur{background:var(--nv-rouge-soft); border-color:transparent; color:#B01B1B}
.novalect-avis--chaud{background:var(--nv-warm); border-color:transparent; color:var(--nv-accent-2)}
.novalect-avis__txt{flex:1; min-width:220px; margin:0}
.novalect-aide{display:block; font-size:.85rem; color:var(--nv-muted); line-height:1.5}

/* ---------- recherche et filtres ---------- */
.novalect-recherche{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap}
.novalect-recherche input[type="search"]{
  flex:1; min-width:220px;
  border:1px solid var(--nv-line); background:var(--nv-paper);
  border-radius:999px; padding:14px 20px; font-family:inherit; font-size:1rem; color:var(--nv-ink);
}
.novalect-recherche input[type="search"]:focus{outline:2px solid var(--nv-accent); outline-offset:1px}

.novalect-filtres{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
.novalect-filtres__lb{
  font-size:.78rem; font-weight:600; color:var(--nv-muted);
  min-width:66px; flex:none;
}
.novalect .novalect-puce{
  display:inline-block; background:var(--nv-soft); color:var(--nv-ink-2);
  border-radius:999px; padding:7px 15px; font-size:.85rem; font-weight:500;
  text-decoration:none; transition:background .16s ease, color .16s ease;
}
.novalect .novalect-puce:hover{background:var(--nv-soft-2); color:var(--nv-ink)}
.novalect .novalect-puce.is-actif{background:var(--nv-ink); color:#FFF; font-weight:600}
.novalect-compte-resultats{font-size:.88rem; color:var(--nv-muted); margin:20px 0 14px}

/* ---------- grille de ressources ----------
   Meme carte que l'accueil : vignette en haut, etiquette de type posee
   sur la vignette, titre, puis le pied avec l'auteur et le cout. */
.novalect-grille{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:1.8rem;
}
@media (max-width:1080px){.novalect-grille{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.novalect-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.novalect-grille{grid-template-columns:1fr}}

.novalect .novalect-doc{
  display:flex; flex-direction:column;
  background:var(--nv-paper); border:1px solid var(--nv-line); border-radius:var(--nv-r);
  overflow:hidden; text-decoration:none; color:var(--nv-ink);
  transition:border-color .16s ease, transform .16s ease;
}
.novalect .novalect-doc:hover{border-color:var(--nv-ink); transform:translateY(-2px); color:var(--nv-ink)}

.novalect-doc__vue{
  position:relative; aspect-ratio:4/3; background:var(--nv-soft);
  border-bottom:1px solid var(--nv-line); overflow:hidden;
}
/* La vraie premiere page du document, quand le serveur a su la fabriquer.
   Elle est calee en haut : c'est le titre du document qu'on veut voir,
   pas le milieu de la page. */
.novalect-doc__img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
}
/* Page factice tracee en CSS, quand aucune vignette n'a pu etre faite.
   Aucune image a fournir, et la carte garde exactement la meme silhouette. */
.novalect-doc__page{
  display:block;
  position:absolute; left:22px; right:22px; top:16px; bottom:-14px;
  background:var(--nv-paper); border:1px solid var(--nv-line);
  border-bottom:0; border-radius:3px 3px 0 0; padding:15px 13px;
}
/* La carte entiere est un lien, donc les traits sont des span et non des
   div comme sur l'accueil. Sans display block, une hauteur posee sur un
   element en ligne ne s'applique pas et la page ressort vide. */
.novalect-doc__l{display:block; height:5px; border-radius:2px; background:var(--nv-line); margin-bottom:7px}
.novalect-doc__l.w1{width:64%; height:7px; background:#C7D0DC; margin-bottom:11px}
.novalect-doc__l.w2{width:100%}
.novalect-doc__l.w3{width:92%}
.novalect-doc__l.w4{width:78%}
.novalect-doc__l.w5{width:96%}
/* Extension du fichier, pour les formats qui n'ont pas de premiere page. */
.novalect-doc__ext{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  background:var(--nv-ink); color:#FFF; padding:4px 9px; border-radius:6px;
}

.novalect-doc__type{
  position:absolute; left:0; top:14px; z-index:2;
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#FFF; padding:6px 11px 6px 12px; border-radius:0 999px 999px 0;
  background:var(--nv-ink);
}
.novalect-doc__type--cours{background:var(--nv-c-cours)}
.novalect-doc__type--td{background:var(--nv-c-td)}
.novalect-doc__type--tp{background:var(--nv-c-tp-d)}
.novalect-doc__type--eval{background:var(--nv-c-eval)}
.novalect-doc__type--annale{background:var(--nv-c-sch)}
.novalect-doc__type--tipe{background:var(--nv-c-sch)}

.novalect-doc__corps{padding:16px 17px 14px; display:flex; flex-direction:column; flex:1}
.novalect-doc__titre{
  display:block; font-size:1rem; font-weight:600; line-height:1.28; letter-spacing:-.015em;
}
.novalect-doc__meta{margin-top:9px; font-size:.81rem; color:var(--nv-muted); line-height:1.45}
.novalect-doc__pied{
  margin-top:auto; padding-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.81rem; color:var(--nv-ink-2);
}
.novalect-doc__cr{
  flex:none; font-weight:600; color:var(--nv-accent-2);
  background:var(--nv-warm); padding:5px 11px; border-radius:999px; font-size:.78rem;
}
.novalect-doc__cr.is-ok{color:#0B6B62; background:var(--nv-vert-soft)}
.novalect-doc__cr.is-libre{color:var(--nv-c-tp-d); background:var(--nv-vert-soft)}

/* L'etiquette d'acces libre sur la fiche. Elle se pose sous celle du type,
   au meme endroit et de la meme facon : deux etiquettes de formes
   differentes au meme coin se liraient comme un defaut de mise en page. */
.novalect-libre{
  position:absolute; left:0; top:48px; z-index:2;
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#FFF; padding:6px 11px 6px 12px; border-radius:0 999px 999px 0;
  background:var(--nv-c-tp-d);
}

/* ---------- liste compacte ----------
   Pour mes depots et mes telechargements : une texture differente de la
   grille, sinon la page empile deux series de cartes identiques. */
.novalect-liste{
  display:flex; flex-direction:column;
  border-top:1px solid var(--nv-line); margin-bottom:1.8rem;
}
.novalect-carte{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--nv-line);
  padding:16px 12px; text-decoration:none; color:var(--nv-ink);
  transition:background .16s ease;
}
.novalect a.novalect-carte:hover{background:var(--nv-soft); color:var(--nv-ink)}
.novalect-carte__corps{display:block; min-width:0}
.novalect-carte__titre{display:block; font-size:.98rem; font-weight:600; line-height:1.35; letter-spacing:-.015em}
.novalect-carte__meta{
  display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:5px;
  font-size:.81rem; color:var(--nv-muted);
}
.novalect-carte__droite{display:flex; align-items:center; gap:8px; flex:none}

.novalect-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.76rem; color:var(--nv-ink-2); font-weight:500;
}
.novalect-etiquette{
  display:inline-block; font-size:.72rem; font-weight:600;
  padding:4px 11px; border-radius:999px; background:var(--nv-soft-2); color:var(--nv-ink-2);
}
.novalect-etiquette--cours{background:var(--nv-bleu-soft); color:var(--nv-c-cours)}
.novalect-etiquette--td{background:var(--nv-violet-soft); color:var(--nv-c-td)}
.novalect-etiquette--tp{background:var(--nv-vert-soft); color:#0B6B62}
.novalect-etiquette--eval{background:var(--nv-rouge-soft); color:var(--nv-c-eval)}
.novalect-etiquette--annale,
.novalect-etiquette--tipe{background:#FCE7F3; color:var(--nv-c-sch)}
.novalect-statut{
  font-size:.72rem; font-weight:600; padding:4px 11px;
  border-radius:999px; background:var(--nv-soft); color:var(--nv-muted);
}
.novalect-statut.is-ok{background:var(--nv-vert-soft); color:#0B6B62}
.novalect-statut.is-attente{background:var(--nv-warm); color:var(--nv-accent-2)}
.novalect-statut.is-refus{background:var(--nv-rouge-soft); color:var(--nv-c-eval)}

.novalect-vide{
  background:var(--nv-soft); border-radius:var(--nv-r);
  padding:44px 24px; text-align:center; color:var(--nv-muted);
}
.novalect-vide p{margin:0 0 .4rem}
.novalect-pagination{display:flex; gap:6px; flex-wrap:wrap; margin:1.6rem 0}
.novalect-pagination .page-numbers{
  padding:9px 15px; border-radius:999px; background:var(--nv-paper);
  border:1px solid var(--nv-line);
  text-decoration:none; color:var(--nv-ink-2); font-size:.88rem; font-weight:600;
}
.novalect-pagination .page-numbers:hover{border-color:var(--nv-ink); color:var(--nv-ink)}
.novalect-pagination .page-numbers.current{background:var(--nv-ink); border-color:var(--nv-ink); color:#FFF}

/* ---------- referentiel ---------- */
.novalect-classe{
  display:flex; align-items:baseline; gap:14px;
  margin:2rem 0 .8rem; padding-bottom:10px; border-bottom:1px solid var(--nv-line);
}
.novalect-classe h3{margin:0; font-size:1.05rem}
.novalect-classe span{font-size:.83rem; color:var(--nv-muted); margin-left:auto}
.novalect-module{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center;
  background:var(--nv-paper); border:1px solid var(--nv-line); border-radius:var(--nv-r-sm);
  padding:14px 16px; margin-bottom:8px;
  transition:border-color .16s ease;
}
.novalect-module:hover{border-color:var(--nv-ink)}
.novalect-module__txt{min-width:0}
.novalect-module__titre{display:block; font-size:.93rem; font-weight:600; line-height:1.35}
.novalect-piliers{display:flex; gap:5px}
.novalect-pilier{
  min-width:32px; height:24px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; font-size:.66rem; font-weight:700;
  background:var(--nv-soft); color:#B9C2CE;
}
.novalect-pilier.is-plein{background:var(--nv-vert-soft); color:#0B6B62}
.novalect-barre{
  grid-column:1 / -1; height:4px; background:var(--nv-soft-2);
  border-radius:99px; overflow:hidden; margin-top:4px;
}
.novalect-barre i{display:block; height:100%; background:var(--nv-accent); border-radius:99px}

/* ---------- fiche d'une ressource ---------- */
.novalect-fiche__haut{
  display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px;
  align-items:start; margin-bottom:1.8rem;
}
@media (max-width:640px){
  .novalect-fiche__haut{grid-template-columns:1fr; gap:18px}
  .novalect-fiche__vue{max-width:230px}
}
.novalect-fiche__vue{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--nv-soft); border:1px solid var(--nv-line); border-radius:var(--nv-r);
}
.novalect-fiche__vue .novalect-doc__page{left:18px; right:18px}

.novalect-fichiers{display:flex; flex-direction:column; gap:9px; margin-bottom:1.4rem}
.novalect-fichier{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--nv-paper); border:1px solid var(--nv-line);
  border-radius:var(--nv-r-sm); padding:13px 16px;
}
.novalect-fichier__nom{flex:1; font-weight:500; min-width:160px; word-break:break-word}
.novalect-fichier__poids{font-size:.83rem; color:var(--nv-muted)}
.novalect-infos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px; background:var(--nv-soft); border-radius:var(--nv-r);
  padding:20px 22px; margin:1.6rem 0;
}
.novalect-infos div{margin:0}
.novalect-infos dt{font-size:.8rem; color:var(--nv-muted); margin:0}
.novalect-infos dd{margin:3px 0 0; font-weight:600; font-size:.94rem}

/* ---------- tableau ---------- */
.novalect-table{
  width:100%; border-collapse:collapse; background:var(--nv-paper);
  border:1px solid var(--nv-line); border-radius:var(--nv-r);
  overflow:hidden; font-size:.9rem;
}
.novalect-table th{
  text-align:left; padding:13px 18px; background:var(--nv-soft);
  font-size:.78rem; color:var(--nv-muted); font-weight:600;
}
.novalect-table td{padding:14px 18px; border-top:1px solid var(--nv-line)}
.novalect-table .novalect-num{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--nv-muted)}
.novalect-table .novalect-num.is-plus{color:var(--nv-vert)}

/* ---------- formulaires ---------- */
.novalect-form{display:flex; flex-direction:column; gap:20px}
.novalect-champ{display:flex; flex-direction:column; gap:7px}
.novalect-champ label,
.novalect-champ > span{font-size:.9rem; font-weight:600}
.novalect-deux{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.novalect-deux{grid-template-columns:1fr}}

/* Tous les types de champ sont nommes. Un seul oubli, et le champ sort
   dans l'habillage du navigateur au milieu de champs habilles : c'est
   exactement ce qui donnait a la page d'inscription son air de brouillon. */
.novalect-form input[type="text"],
.novalect-form input[type="email"],
.novalect-form input[type="password"],
.novalect-form input[type="tel"],
.novalect-form input[type="url"],
.novalect-form input[type="number"],
.novalect-form input[type="search"],
.novalect-form input[type="date"],
.novalect-form select,
.novalect-form textarea{
  width:100%; border:1px solid var(--nv-line); background:var(--nv-paper);
  border-radius:var(--nv-r-sm); padding:13px 16px;
  font-family:inherit; font-size:1rem; line-height:1.45; color:var(--nv-ink);
}
.novalect-form textarea{min-height:120px; resize:vertical}
.novalect-form input:focus,
.novalect-form select:focus,
.novalect-form textarea:focus{outline:2px solid var(--nv-accent); outline-offset:1px; border-color:transparent}
.novalect-form input::placeholder,
.novalect-form textarea::placeholder{color:#A7B1BF}
.novalect-form input[type="file"]{
  width:100%; font-family:inherit; font-size:.9rem;
  background:var(--nv-soft); border:1px dashed var(--nv-line);
  border-radius:var(--nv-r-sm); padding:16px;
}
.novalect-form .novalect-btn{align-self:flex-start}

/* Le champ en faute se signale la ou il est, pas seulement dans un
   bandeau en haut de page qu'il faut aller relire apres avoir defile. */
.novalect-erreur{
  display:block; font-size:.83rem; font-weight:500; color:#B01B1B; line-height:1.45;
}
.novalect-champ.is-erreur input,
.novalect-champ.is-erreur select,
.novalect-champ.is-erreur textarea{border-color:#B01B1B}
.novalect-champ.is-erreur > label{color:#B01B1B}
.novalect-oblig{color:var(--nv-accent-2); font-weight:700; margin-left:2px}

/* Mot de passe, avec le bouton qui le rend visible. On tape a l'aveugle
   sur un telephone, on se trompe, et on repart. */
.novalect-mdp{position:relative; display:block}
.novalect-mdp input{padding-right:96px}
.novalect-mdp__voir{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:600; color:var(--nv-ink-2);
  padding:10px 12px; min-height:44px; border-radius:999px;
}
.novalect-mdp__voir:hover{background:var(--nv-soft); color:var(--nv-ink)}

.novalect-choisis{
  display:block; font-size:.83rem; font-weight:600; line-height:1.5;
  color:#0B6B62; margin-top:8px; word-break:break-word;
}

/* Case a cocher. Elle doit rester bien visible : le navigateur refuse
   d'envoyer un formulaire dont une case obligatoire est cachee, et il le
   fait sans rien afficher, ce qui donne un bouton qui semble mort. */
.novalect-case{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--nv-soft); border-radius:var(--nv-r-sm);
  padding:15px 16px; cursor:pointer;
}
.novalect-case input{
  margin-top:3px; width:18px; height:18px; flex:none;
  accent-color:var(--nv-accent);
}
.novalect-case span{font-size:.88rem; line-height:1.55; color:var(--nv-ink-2)}

/* Champ piege, retire du flux sans display:none, que certains robots detectent. */
.novalect-piege{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* ---------- inscription ----------
   Deux colonnes : le formulaire a gauche, et a droite ce que le compte
   ouvre reellement. Sans cette colonne, la page demande beaucoup et ne
   promet rien, et personne ne remplit un formulaire pour rien. */
.novalect-ins{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:20px; align-items:start;
}
@media (max-width:900px){.novalect-ins{grid-template-columns:1fr}}

.novalect-ins__form{
  background:var(--nv-paper); border:1px solid var(--nv-line);
  border-radius:var(--nv-r-lg); padding:30px;
}
@media (max-width:560px){.novalect-ins__form{padding:22px 18px}}
.novalect-ins__form h2{margin:0 0 6px; font-size:1.25rem}
.novalect-ins__form > .novalect-aide:first-of-type{margin-bottom:6px}

/* Les etapes. Elles disent d'entree ce qui attend la personne, et
   surtout que le depot n'ouvre qu'apres validation du compte. */
.novalect-etapes{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.novalect-etape{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:14px;
  padding:0 0 18px 0; position:relative;
}
.novalect-etape:last-child{padding-bottom:0}
/* La pastille et le texte sont vises par deux classes chacun, jamais par
   un selecteur classe plus type. Ecrit .novalect-etape span, la regle du
   texte vaut (0,1,1) et ecrase .novalect-etape__n qui ne vaut que (0,1,0) :
   la pastille repassait en display block et le chiffre disparaissait
   derriere son propre fond. C'est le meme piege que sur .nv, et il faut
   l'eviter d'office. */
.novalect-etape .novalect-etape__n{
  width:26px; height:26px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--nv-soft); color:var(--nv-ink-2);
  font-size:.76rem; font-weight:700; line-height:1; flex:none;
}
.novalect-etape.is-actif .novalect-etape__n{background:var(--nv-accent-2); color:#FFF}
.novalect-etape .novalect-etape__t{display:block; min-width:0}
.novalect-etape .novalect-etape__t b{display:block; font-size:.92rem; font-weight:600; line-height:1.35}
.novalect-etape .novalect-etape__t span{display:block; font-size:.83rem; color:var(--nv-muted); line-height:1.5; margin-top:3px}
/* Le trait qui relie les etapes, trace en fond pour ne pas depasser
   sous la derniere pastille. */
.novalect-etape:not(:last-child)::before{
  content:""; position:absolute; left:12.5px; top:30px; bottom:4px;
  width:1px; background:var(--nv-line);
}

.novalect-ins__cote{
  background:var(--nv-soft); border-radius:var(--nv-r-lg); padding:28px 26px;
}
.novalect-ins__cote h3{margin:0 0 16px; font-size:1.05rem}
.novalect-ins__pts{list-style:none; margin:0; padding:0}
.novalect-ins__pts li{
  position:relative; padding:9px 0 9px 24px;
  font-size:.92rem; color:var(--nv-ink-2); line-height:1.5;
}
.novalect-ins__pts li::before{
  content:""; position:absolute; left:0; top:16px;
  width:8px; height:8px; border-radius:999px; background:var(--nv-accent);
}
.novalect-ins__pts li b{color:var(--nv-ink); font-weight:600}
.novalect-ins__cote .novalect-note{
  margin:20px 0 0; padding-top:18px; border-top:1px solid var(--nv-line);
  font-size:.83rem; color:var(--nv-muted); line-height:1.55;
}

/* Le tableau de bord du membre ne vit plus ici. Il n'y a qu'un seul
   espace, celui de /mon-espace, et il porte sa propre feuille,
   assets/console.css. Deux jeux de styles pour le meme ecran, c'est
   l'un des deux qui derive. */

/* Etat du compte, affiche sur la page du compte et sur celle du depot. */
.novalect-etat-compte{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  border-radius:var(--nv-r); padding:18px 20px; margin:0 0 1.4rem;
  background:var(--nv-warm);
}
.novalect-etat-compte.is-ok{background:var(--nv-vert-soft)}
.novalect-etat-compte.is-ferme{background:var(--nv-rouge-soft)}
.novalect-etat-compte__txt{flex:1; min-width:240px}
.novalect-etat-compte b{display:block; font-size:.98rem; font-weight:600; color:var(--nv-ink)}
.novalect-etat-compte span{display:block; font-size:.88rem; line-height:1.55; color:var(--nv-ink-2); margin-top:4px}

/* Partage. Le lien reste visible et selectionnable, parce que beaucoup de
   gens le copient a la main plutot que de passer par le bouton. */
.novalect-partage{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--nv-soft); border-radius:var(--nv-r);
  padding:14px 16px; margin:1.8rem 0;
}
.novalect-lien-copie{
  flex:1; min-width:220px; border:1px solid var(--nv-line); background:var(--nv-paper);
  border-radius:999px; padding:11px 16px;
  font-size:.86rem; color:var(--nv-ink-2); font-family:inherit;
}
.novalect-lien-copie:focus{outline:2px solid var(--nv-accent); outline-offset:1px}

@media (max-width:600px){
  .novalect-carte{flex-direction:column; align-items:flex-start; gap:10px}
  .novalect-carte__droite{flex-direction:row; align-items:center}
  .novalect-filtres__lb{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .novalect *{transition:none !important}
}