@import url("ordinia-tokens.f7a0065cd154.css");

/* --- Fontes de la marque, auto-hébergées ---------------------------------
   Cormorant Garamond pour les titres, Lora pour le texte (SIL Open Font
   License, voir fonts/OFL.txt). Servies depuis notre propre domaine : la
   section 1 de l'identité visuelle interdit tout appel réseau vers un tiers,
   et une ASBL n'a pas à annoncer à Google chaque page qu'un de ses membres
   consulte.

   Trois fichiers et non cinq comme le prévoyait la spécification : l'amont
   ne distribue plus que des fontes **variables**, dont un seul fichier porte
   toutes les graisses. Les cinq statiques demandées revenaient à télécharger
   deux fois le même octet.

   Seul le sous-ensemble latin est embarqué : le produit est belge et bilingue
   FR/NL, et le cyrillique triplerait le poids pour des caractères que
   personne n'affichera.

   `font-display: swap` : le texte s'affiche tout de suite dans la pile de
   repli, puis se redessine. Un secrétaire ne doit pas attendre 40 ko pour
   lire une date d'échéance.

   Chemins relatifs : `ManifestStaticFilesStorage` les réécrit tout seul au
   `collectstatic`. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.ec4225ec161b.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src: url("fonts/lora.662c56ecd8de.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src: url("fonts/lora-italic.bf88700c66c9.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Feuille de style d'Ordinia — identité « Classical », voir brand/IDENTITE-VISUELLE.md.
   Écrite à la main, sans cadre CSS ni chaîne de construction, et sans aucun
   appel réseau vers un tiers.

   Trois règles gouvernent tout ce qui suit :
   1. la couleur est un trait, jamais un aplat — l'or fait des filets, pas des fonds ;
   2. la hiérarchie vient de la typographie et des filets, pas de l'ombre ;
   3. seul le problème est coloré — une obligation à jour est neutre.

   Aucun hex ici : toute valeur vient de ordinia-tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.6 var(--texte);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: var(--titre-graisse);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e2);
}
h1 { font-size: 2.1rem; font-weight: 400; }   /* plus c'est grand, plus c'est léger */
h2 { font-size: 1.4rem; margin-top: var(--e8); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--e3); }
strong { font-weight: 600; }                  /* jamais 700 */
a { color: var(--accent-texte); }

/* Les explications juridiques se lisent en colonne mesurée. */
.sous-titre, .echeance__note, .fondement__meta, .instructions, .qualification__regle {
  max-width: 62ch;
  text-wrap: pretty;
}

/* Un nombre est un chiffre : il s'aligne. Jamais sur le texte courant, où Lora
   élargirait les espaces. */
th, td, time, .grande-date, .empreinte, .paires dd { font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.saut-au-contenu { position: absolute; left: -9999px; }
.saut-au-contenu:focus {
  left: .5rem; top: .5rem; z-index: 10;
  background: var(--surface); padding: .5rem .75rem; border-radius: var(--rayon);
}

/* --- Étiquettes de colonne et sur-titres ---------------------------------- */

th, .etiquette-legende {
  font-family: var(--texte);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 600;
}

/* --- En-tête : barre du compte, puis bandeau de navigation ----------------
   Deux étages. En haut, sur le noir `--colophon` que la charte réserve aux
   en-têtes pleins : où l'on est (l'association) et qui l'on est (le compte).
   Dessous, sur `--surface` : la navigation dans cette association. Séparer les
   deux a rendu au bandeau sa lisibilité — neuf liens et quatre contrôles de
   compte sur une seule ligne se disputaient la place et passaient à la ligne
   au hasard de la longueur du nom de l'association. */

.entete { position: relative; z-index: 4; }

.barre-compte { background: var(--colophon); color: var(--neutre-300); }
.barre-compte__interieur {
  max-width: 62rem; margin: 0 auto; padding: .4rem var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  min-height: 3.25rem;
}
.marque {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--titre); font-weight: var(--titre-graisse);
  font-size: 1.35rem; letter-spacing: .02em;
  text-decoration: none; color: var(--encre);
}
.marque__sceau { display: block; border-radius: 3px; }
.marque--sombre { color: var(--neutre-100); font-size: 1.3rem; }
.marque--sombre:hover { color: var(--or-300); }

.barre-compte__outils { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.barre-compte__outils form { margin: 0; }
.barre-compte__lien {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem;
  padding: 0 .1rem; font: inherit; font-size: .9rem; color: var(--neutre-300);
  background: none; border: 0; text-decoration: none; cursor: pointer;
}
.barre-compte__lien:hover { color: var(--or-300); }
/* Le soulignement est la marque d'état, sur fond sombre comme sur fond clair. */
.barre-compte__lien[aria-current="page"] { color: var(--neutre-100); box-shadow: inset 0 -1px 0 var(--accent); }
/* Le libellé court n'existe que pour les lecteurs d'écran, et seulement quand
   le libellé visible est masqué (voir « Téléphone ») : sans quoi le nom et
   « Profil » seraient lus l'un après l'autre. */
.barre-compte__court { display: none; }

/* Sélecteur d'association : toujours présent, même avec une seule association,
   parce qu'il dit sur quelle association on travaille — c'est la première
   chose qu'un secrétaire de deux ASBL doit pouvoir lire. */
.selecteur { position: relative; }
.selecteur summary {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 22rem;
  min-height: 2.25rem; padding: 0 .65rem; cursor: pointer; list-style: none;
  font-size: .92rem; color: var(--neutre-100);
  border: 1px solid var(--neutre-800); border-radius: var(--rayon);
}
.selecteur summary::-webkit-details-marker { display: none; }
.selecteur summary:hover, .selecteur[open] summary { border-color: var(--accent); }
.selecteur summary .icone { flex: none; color: var(--neutre-400); }
.selecteur__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur__chevron { transition: transform .15s ease; }
.selecteur[open] .selecteur__chevron { transform: rotate(180deg); }
.selecteur ul {
  position: absolute; left: 0; z-index: 5;
  margin: .4rem 0 0; padding: .35rem; min-width: 16rem; list-style: none;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);          /* une ombre : ceci flotte réellement */
}
.selecteur li a {
  display: block; padding: .45rem .55rem; border-radius: 3px;
  color: var(--encre); text-decoration: none;
}
.selecteur li a:hover { background: var(--or-100); }
.selecteur li a[aria-current] { font-weight: 600; }
.selecteur__separation { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--trait); }

/* `.barre-compte` en tête du sélecteur : `.bouton`, déclaré plus bas, l'emportait
   à spécificité égale et remettait le texte à l'encre — noir sur noir. */
.barre-compte .bouton--sombre {
  min-height: 2.25rem; padding: .15rem .85rem; line-height: 1.6;
  color: var(--neutre-100); border-color: var(--accent);
}
.barre-compte .bouton--sombre:hover { background: var(--or-900); color: var(--neutre-100); }

/* Bascule de langue : « FR | NL », un geste, aucun JavaScript. */
.langues {
  display: inline-flex; align-items: stretch; margin: 0;
  border: 1px solid var(--neutre-800); border-radius: var(--rayon);
}
.langues__choix {
  min-height: 2.25rem; min-width: 2.5rem; padding: 0 .5rem;
  font: inherit; font-size: .78rem; letter-spacing: .1em;
  color: var(--neutre-400); background: none; border: 0; cursor: pointer;
}
.langues__choix + .langues__choix { border-left: 1px solid var(--neutre-800); }
.langues__choix:hover { color: var(--or-300); }
.langues__choix[aria-pressed="true"] { color: var(--neutre-100); box-shadow: inset 0 -2px 0 var(--accent); }

.bandeau { background: var(--surface); border-bottom: 1px solid var(--trait); }
.bandeau__interieur { max-width: 62rem; margin: 0 auto; padding: 0 var(--e4); }
/* Le bandeau **enveloppe**, il ne défile pas.

   Il défilait tant qu'il portait dix liens à plat. Depuis qu'ils sont rangés
   en sections, ils tiennent — et le défilement empêchait les sections de
   s'ouvrir : dès qu'un axe d'`overflow` n'est plus `visible`, l'autre passe à
   `auto` avec lui, et la boîte du bandeau, haute de 2,9 rem, rognait le menu
   posé juste en dessous à `top: 100%`. Le `<details>` s'ouvrait, son panneau
   restait invisible.

   D'où l'enveloppement, comme la barre du compte juste au-dessus — c'est elle
   qui porte le sélecteur d'association, le seul `<details>` du bandeau qui
   n'ait jamais eu ce défaut, et pour cette raison exactement. */
.bandeau__nav {
  display: flex; flex-wrap: wrap; gap: 0 var(--e4); align-items: stretch;
}
.bandeau__nav a {
  display: inline-flex; align-items: center; min-height: 2.9rem; white-space: nowrap;
  font-size: .95rem; color: var(--encre-douce); text-decoration: none;
}
.bandeau__nav a:hover { color: var(--or-700); }
/* Le soulignement est la marque d'état : jamais un aplat d'or. */
.bandeau__nav a[aria-current="page"] {
  color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent);
}

/* Toute icône se cale sur la ligne de texte qu'elle accompagne. */
.icone { flex: none; vertical-align: -0.2em; }

/* --- Contenu -------------------------------------------------------------- */

.contenu {
  flex: 1; width: 100%; max-width: 62rem; margin: 0 auto;
  padding: var(--e8) var(--e4) var(--e8);
}
.sous-titre { color: var(--encre-douce); margin-top: calc(var(--e1) * -1); }
.fil { margin: 0 0 var(--e3); font-size: .9rem; }

/* Pas d'ombre dans les grilles : un filet est une décision, une ombre un murmure. */
.carte {
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--e4);
}
.carte + .carte { margin-top: var(--e3); }
.carte__titre { margin: var(--e4) 0 var(--e2); font-size: 1.1rem; }
.carte > .carte__titre:first-child { margin-top: 0; }

.grille { display: grid; gap: var(--e3); }
@media (min-width: 44rem) { .grille--deux { grid-template-columns: 1fr 1fr; } }

/* Le trait épais à gauche est un tic de tableau de bord : filet sur les quatre côtés. */
.encart {
  border: 1px solid var(--accent);
  background: var(--accent-clair);
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon);
  margin: 0 0 var(--e3);
}
.encart--alerte { border-color: var(--alerte); background: var(--alerte-clair); }

/* Filet de clôture : une seule fois par page, avant le pied. */
.cloture {
  height: 8px; margin: var(--e6) 0 var(--e4);
  background: url("brand/ordinia-rule.f650582cb771.svg") center / auto 8px no-repeat;
}

/* --- Listes de données ---------------------------------------------------- */

.paires { display: grid; grid-template-columns: max-content 1fr; gap: .4rem var(--e6); margin: 0; }
.paires dt { color: var(--encre-douce); }
.paires dd { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--e2) var(--e1); }
thead th { border-bottom: 2px solid var(--trait); }
tbody td { border-bottom: 1px solid var(--trait); }
tbody tr:hover { background: var(--neutre-100); }
.tableau-defilant { overflow-x: auto; }

.etiquette {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--trait); color: var(--encre-douce);
}
.etiquette--succes { border-color: var(--trait); color: var(--succes); }
.etiquette--attente { border-color: var(--accent); background: var(--accent-clair); color: var(--or-700); }

/* --- Formulaires ---------------------------------------------------------- */

.formulaire { max-width: 34rem; }
.formulaire p { margin: 0 0 var(--e3); }
.formulaire label { display: block; font-weight: 600; margin-bottom: .25rem; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; padding: .55rem .65rem;
  font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.formulaire .helptext { display: block; font-size: .85rem; color: var(--encre-douce); }

/* Une case à cocher n'est pas un champ de saisie : la règle `width: 100%`
   ci-dessus l'étirait sur toute la colonne et la sortait de son étiquette. */
.formulaire input[type="checkbox"], .formulaire input[type="radio"] {
  width: auto; margin-right: .5rem; vertical-align: middle;
}
.formulaire label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .1rem; }
.formulaire ul.errorlist {
  margin: 0 0 .35rem; padding: 0; list-style: none;
  color: var(--alerte); font-size: .9rem;
}

/* Jamais d'aplat : un bouton est un contour. */
.bouton {
  display: inline-block; padding: .5rem 1rem; min-height: 2.75rem;
  font-family: var(--titre); font-size: 1rem; font-weight: 600;
  line-height: 1.7;
  color: var(--encre); background: transparent;
  border: 1px solid var(--accent); border-radius: var(--rayon);
  text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--or-100); }
.bouton:active { border-color: var(--or-600); }
.bouton--discret {
  border-color: transparent; color: var(--encre-douce); background: transparent;
}
.bouton--discret:hover { background: transparent; color: var(--encre); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e6); }

/* --- Messages et pied ----------------------------------------------------- */

.messages { max-width: 62rem; margin: var(--e3) auto 0; padding: 0 var(--e4); list-style: none; }
.message {
  padding: var(--e2) var(--e4);
  border-left: 3px solid var(--succes);
  background: var(--succes-clair);
  color: var(--encre);              /* la couleur est dans le trait, pas dans le texte */
}
.message--error { border-left-color: var(--alerte); background: var(--alerte-clair); }

/* Le pied est plein, comme la barre du compte : les deux encadrent la page,
   et le filet de clôture or qui le précède reste le seul ornement. */
.pied { background: var(--colophon); color: var(--neutre-400); font-size: .9rem; }
.pied__interieur {
  max-width: 62rem; margin: 0 auto; padding: var(--e8) var(--e4) var(--e6);
  display: grid; gap: var(--e6);
}
@media (min-width: 44rem) { .pied__interieur { grid-template-columns: 1.4fr 1fr; } }
.pied__marque { display: flex; gap: var(--e3); align-items: flex-start; }
.pied__marque img { display: block; flex: none; }
.pied__nom {
  margin: 0; font-family: var(--titre); font-size: 1.5rem; line-height: 1.1;
  letter-spacing: .02em; color: var(--neutre-100);
}
.pied__devise { margin: .25rem 0 0; max-width: 34ch; }
.pied__liens { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.pied__titre {
  margin: 0 0 var(--e2); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--neutre-500);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pied a { color: var(--neutre-200); text-decoration: none; }
.pied a:hover { color: var(--or-300); text-decoration: underline; }
.pied__mentions {
  max-width: 62rem; margin: 0 auto; padding: var(--e4) var(--e4) var(--e6);
  border-top: 1px solid var(--neutre-800);
}
.pied__mentions p { max-width: 72ch; margin: 0 0 var(--e2); font-size: .82rem; text-wrap: pretty; }

/* --- Bannière d'alerte globale -------------------------------------------- */

.bandeau-alerte { background: var(--alerte-clair); border-bottom: 1px solid var(--alerte); }
.bandeau-alerte__interieur {
  max-width: 62rem; margin: 0 auto; padding: var(--e3) var(--e4);
  color: var(--encre); font-size: .93rem;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center;
}
.bandeau-alerte__interieur form { margin-left: auto; }

/* --- Échéancier ----------------------------------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; margin-bottom: var(--e4); }
.filtres label { font-weight: 600; }
.filtres select, .filtres input {
  padding: .45rem .6rem; font: inherit; color: inherit;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
}

/* Vocabulaire d'état : seul le problème est coloré. */
.echeance { border: 1px solid var(--trait); }
.echeance--en_cours { border-color: var(--accent); background: var(--accent-clair); }
.echeance--en_retard { border-color: var(--alerte); background: var(--alerte-clair); }
.echeance--non_applicable { opacity: .6; }

.echeance__entete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: space-between; align-items: flex-start; }
.echeance__meta { margin: 0; color: var(--encre-douce); font-size: .9rem; }
.echeance__date { text-align: right; font-size: 1.05rem; }
.echeance__estimee { display: block; font-size: .78rem; color: var(--encre-douce); font-weight: 400; }
.echeance__note { margin: var(--e2) 0 0; font-size: .9rem; color: var(--encre-douce); }
.echeance__aller { margin: var(--e2) 0 0; font-size: .92rem; }
.echeance__action { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e3); font-size: .9rem; }
.echeance__action input, .echeance__action select {
  padding: .4rem .55rem; font: inherit; color: inherit;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
}
.echeance__lien { text-decoration: none; color: inherit; }
.echeance__lien:hover { color: var(--accent-texte); text-decoration: underline; }
.etiquette--en_retard { border-color: var(--alerte); background: var(--alerte-clair); color: var(--alerte); }

/* --- États d'une pièce transactionnelle ----------------------------------
   Une pastille par état, lisible d'un coup d'œil dans une liste de trente
   lignes. C'est le seul endroit où la charte accepte un aplat : « seul le
   problème est coloré » vaut pour les échéances, où l'aplat crierait sur une
   association à jour. Ici l'état EST l'information de la colonne, et devoir
   lire chaque mot pour trouver les impayées revient à ne pas les trouver.

   Les teintes viennent des jetons, jamais d'un hex : payé sur le vert de la
   réussite, en retard sur le rouge de l'alerte, en cours sur l'or, et les
   états inertes — brouillon, annulé — en gris, parce qu'ils n'appellent
   aucune action. */
.etiquette--payee,
.etiquette--signe { border-color: var(--succes); background: var(--succes-clair); color: var(--succes); }
.etiquette--emise,
.etiquette--approuvee,
.etiquette--attente_signature { border-color: var(--accent); background: var(--accent-clair); color: var(--or-700); }
.etiquette--impayee,
.etiquette--refuse { border-color: var(--alerte); background: var(--alerte-clair); color: var(--alerte); }
.etiquette--brouillon { border-color: var(--trait); background: var(--neutre-200); color: var(--encre-douce); }
.etiquette--annulee { border-color: var(--trait); background: var(--neutre-200); color: var(--encre-douce); text-decoration: line-through; }
.etiquette--en_cours { border-color: var(--accent); background: var(--accent-clair); color: var(--or-700); }
.etiquette--fait { border-color: var(--trait); color: var(--succes); }
.etiquette--non_applicable { border-color: var(--trait); color: var(--encre-douce); }
.echu { color: var(--alerte); }

.fondement { margin-top: var(--e3); font-size: .9rem; }
.fondement summary { cursor: pointer; color: var(--accent-texte); }
.fondement blockquote, .texte-legal {
  margin: var(--e2) 0 var(--e2); padding-left: var(--e3);
  border-left: 1px solid var(--accent); color: var(--encre-douce); font-style: italic;
}
.fondement__meta { margin: 0; color: var(--encre-douce); font-size: .85rem; }
.qualification__regle { margin: var(--e1) 0 0; font-size: .88rem; color: var(--encre-douce); }

/* --- Page d'une échéance et d'une assemblée -------------------------------- */

.echeance-detail__entete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: flex-start; justify-content: space-between; }
.carte--date { text-align: center; }
.grande-date { margin: 0; font-family: var(--titre); font-size: 1.9rem; font-weight: 400; line-height: 1.2; }
.base-legale { font-weight: 600; margin-bottom: var(--e2); }
.instructions p { margin: 0 0 var(--e2); }
.portails { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e2); }
.portails li { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.portails__quand { font-size: .88rem; color: var(--encre-douce); }
.preuves { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e2); }
.preuves li { padding-bottom: var(--e2); border-bottom: 1px solid var(--trait); }
.preuves__meta { display: block; font-size: .85rem; color: var(--encre-douce); }
.depot { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.depot input[type="file"] { flex: 1 1 14rem; min-width: 0; font: inherit; }
.empreinte { font-size: .85rem; word-break: break-all; }
.apres-liste { margin: var(--e3) 0 0; }
.sans-marge { margin: 0; }

/* Les seuils du CSA : une liste de valeurs à comparer, alignées pour être lues
   ligne à ligne contre ses propres chiffres. */
.seuils { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: .2rem; }
.seuils li { display: flex; flex-wrap: wrap; gap: .35rem; }
.seuils strong { font-variant-numeric: tabular-nums; }
.liste-encart { margin: var(--e1) 0 0; padding-left: 1.1rem; }

/* Visible des seuls lecteurs d'écran. Une colonne de boutons « Retirer » n'a
   pas besoin d'un titre à l'écran, mais un tableau dont une colonne n'a pas
   d'en-tête est illisible en navigation vocale (WCAG 2.1 AA, section 8). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pagination du coffre-fort. Les cibles font 44 px de haut : le public est âgé
   et tout doit rester utilisable au doigt (section 10.2). */
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  align-items: center; justify-content: center;
  margin-top: var(--e4); color: var(--encre-douce); font-size: .9rem;
}
.pagination a { display: inline-flex; align-items: center; min-height: 44px; }
.point__outils { display: flex; gap: var(--e1); flex-wrap: wrap; }
.point__outils form { margin: 0; }

/* --- Téléphone ------------------------------------------------------------
   « Tout doit être utilisable sur un téléphone » (section 10.2) : le
   secrétaire consulte ses rappels dessus, et le public est âgé. */

@media (max-width: 30rem) {
  body { font-size: 15px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.25rem; margin-top: var(--e6); }

  .contenu { padding: var(--e4) var(--e3) var(--e8); }
  .carte { padding: var(--e3); border-radius: 0; margin-left: calc(var(--e3) * -1); margin-right: calc(var(--e3) * -1); }
  .grande-date { font-size: 1.5rem; }

  .barre-compte__interieur { padding: .35rem var(--e3); gap: .35rem var(--e2); }
  /* Le nom du compte et « Déconnexion » cèdent la place à leurs icônes ; le
     libellé court reste dans la page pour les lecteurs d'écran. */
  .barre-compte__libelle { display: none; }
  .barre-compte__court { display: block; }
  .barre-compte__outils { gap: var(--e1); }
  .barre-compte__lien { min-width: 2.75rem; justify-content: center; }
  /* Le sélecteur passe sous la marque, sur toute la largeur : un nom d'ASBL
     tronqué à dix caractères ne dit plus sur quelle association on travaille. */
  .selecteur { order: 3; flex: 1 1 100%; }
  .selecteur summary { max-width: none; width: 100%; min-height: 2.75rem; }
  .selecteur__chevron { margin-left: auto; }
  .selecteur ul { position: fixed; left: .75rem; right: .75rem; min-width: 0; }

  .bandeau__interieur { padding: 0 var(--e3); }
  /* Plus de fondu au bord droit : il annonçait un défilement qui n'existe plus,
     et un masque s'applique aussi aux descendants — le bord droit d'un menu
     ouvert s'y serait effacé.

     Le menu prend toute la largeur, comme le sélecteur d'association : un
     panneau de 14 rem ancré sur une entrée de milieu de ligne dépasserait
     l'écran par la droite et ferait défiler la page entière de travers. */
  .menu-nav ul {
    position: fixed; top: auto; left: .75rem; right: .75rem; min-width: 0;
  }

  /* La bascule de langue est dans cette liste depuis la recette du 8 septembre :
     elle en était absente et tombait à 35 px, sous le minimum de 44. C'est le
     seul contrôle du bandeau qu'un utilisateur touche vraiment, et le public
     est âgé (section 10.2). */
  .bouton, .depot input[type="file"], .filtres select, .filtres input,
  .echeance__action input, .echeance__action select,
  .formulaire input, .formulaire select, .langues__choix, .barre-compte__lien { min-height: 2.75rem; }
  .bouton { width: 100%; text-align: center; }
  .barre-compte .bouton { width: auto; min-height: 2.75rem; padding: .15rem .6rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions a { text-align: center; }

  .filtres { flex-direction: column; align-items: stretch; gap: var(--e1); }
  .echeance__entete { flex-direction: column; }
  .echeance__date { text-align: left; }
  .echeance__action { flex-direction: column; align-items: stretch; }
  .echeance__action input, .echeance__action select { width: 100%; }
  .depot { flex-direction: column; align-items: stretch; }
  .bandeau-alerte__interieur form { margin-left: 0; width: 100%; }

  .paires { grid-template-columns: 1fr; gap: .1rem; }
  .paires dt { margin-top: var(--e2); font-size: .85rem; }

  table { font-size: .92rem; }
  th, td { padding: var(--e2) var(--e1); }
  .messages { padding: 0 var(--e3); }
  .pied__interieur { padding: var(--e6) var(--e3) var(--e4); }
  .pied__mentions { padding: var(--e4) var(--e3); }
}

/* --- Bloc-marque (écrans de connexion, inscription) ------------------------ */

.marque-bloc { display: inline-flex; align-items: center; gap: .875rem; }
.marque-bloc__sceau { display: block; border-radius: 5px; }
.marque-bloc__texte { display: flex; flex-direction: column; gap: .2rem; }
.marque-bloc__nom {
  font-family: var(--titre); font-weight: 400; font-size: 2.6rem;
  line-height: 1; letter-spacing: .02em; color: var(--encre);
}
.marque-bloc__sous {
  font-family: var(--texte); font-size: .53rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--encre-douce);
}
.marque-bloc--sombre .marque-bloc__nom { color: var(--fond); }
.marque-bloc--sombre .marque-bloc__sous { color: var(--neutre-400); }

.accueil-marque { margin: var(--e6) 0 var(--e8); }


/* --- Vues tableau pleine largeur (module de comptabilité) -----------------
   Un livre comptable ne tient pas dans la colonne de lecture de 62rem : on
   l'élargit pour cette famille d'écrans, et pour elle seule. Le reste du
   produit garde sa largeur de lecture, qui est faite pour du texte. */
.contenu--large { max-width: 96rem; }

/* Tableau où chaque ligne est un formulaire : la saisie et la correction se
   font au même endroit, sans quitter l'écran ni ouvrir de fenêtre. */
.tableau-saisie { width: 100%; border-collapse: collapse; }
.tableau-saisie th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre-douce); font-weight: 600;
  padding: var(--e1) var(--e2); border-bottom: 1px solid var(--trait);
}
.tableau-saisie td { padding: var(--e1) var(--e2); border-bottom: 1px solid var(--trait); }
.tableau-saisie tr:hover td { background: var(--neutre-100); }
.tableau-saisie input[type="text"],
.tableau-saisie input[type="date"],
.tableau-saisie select,
.tableau-saisie textarea {
  width: 100%; min-width: 0; padding: .3rem .4rem; font-size: .92rem;
}
.tableau-saisie .nombre { text-align: right; }
.tableau-saisie .nombre input { text-align: right; }
.tableau-saisie tr.ligne-neuve td { background: var(--neutre-100); }
.tableau-saisie tfoot td { font-weight: 600; border-top: 2px solid var(--encre); }
/* Les erreurs d'une ligne s'affichent sous elle, pas en tête d'écran : sur
   trente lignes, un message global n'apprend pas laquelle est fautive. */
.tableau-saisie .erreur-ligne { color: var(--alerte); font-size: .82rem; }
.barre-actions {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  margin: var(--e3) 0;
}
@media (max-width: 60rem) {
  /* Sur téléphone, le tableau défile horizontalement (`.tableau-defilant`,
     déjà défini plus haut) plutôt que d'écraser ses colonnes : « tout doit
     être utilisable sur un téléphone ». */
  .tableau-saisie { min-width: 52rem; }
}

/* --- États de conformité (IDENTITE-VISUELLE.md, §7) -----------------------
   Un vocabulaire unique pour l'échéancier, le tableau de bord et l'aperçu
   gratuit. L'icône porte la couleur, le texte reste à l'encre, et le délai est
   toujours écrit en mots : rien ne repose sur la seule couleur. */

.etat { display: inline-flex; align-items: center; gap: .4rem; }
.etat .icone { color: var(--neutre-500); }
.etat--fait .icone { color: var(--encre-douce); }
.etat--en_cours .icone { color: var(--or-700); }
.etat--en_retard .icone { color: var(--alerte); }
.echeance__delai { display: block; font-size: .85rem; color: var(--encre-douce); font-weight: 400; }
.echeance--en_retard .echeance__delai { color: var(--alerte); }
.echeance__titre { display: flex; gap: .5rem; align-items: baseline; margin-top: 0; }
.echeance__titre .icone { position: relative; top: .15em; }

/* --- Tableau de bord : les chiffres d'abord ------------------------------- */

.chiffres { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); margin: var(--e4) 0 var(--e6); }
/* Une grille qui suit une carte en reprend l'écart, comme deux cartes qui se suivent. */
.carte + .grille, .grille + .carte { margin-top: var(--e3); }
@media (min-width: 44rem) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre {
  display: flex; flex-direction: column; gap: .15rem;
  padding: var(--e3) var(--e4); border: 1px solid var(--trait); border-radius: var(--rayon);
  color: inherit; text-decoration: none;
}
a.chiffre:hover { border-color: var(--accent); }
.chiffre__nombre {
  font-family: var(--titre); font-size: 2.2rem; font-weight: 400; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.chiffre__libelle { display: flex; gap: .35rem; align-items: center; font-size: .88rem; color: var(--encre-douce); }
/* Seul le problème est coloré — et seulement quand il existe. */
.chiffre--en_retard.chiffre--present { border-color: var(--alerte); background: var(--alerte-clair); }
.chiffre--en_retard.chiffre--present .icone { color: var(--alerte); }
.chiffre--en_cours.chiffre--present { border-color: var(--accent); background: var(--accent-clair); }
.chiffre--en_cours.chiffre--present .icone { color: var(--or-700); }

/* --- Pages publiques -------------------------------------------------------
   Des sections pleine largeur qui alternent le fond et la surface, séparées
   par des filets. La colonne de lecture reste celle de l'application. */

.contenu--vitrine { max-width: none; padding: 0; }
.vitrine__colonne { max-width: 62rem; margin: 0 auto; padding: 0 var(--e4); }
.section { padding: calc(var(--e8) * 1.6) 0; border-bottom: 1px solid var(--trait); }
.section--surface { background: var(--surface); }
.section:last-child { border-bottom: 0; }
.section__entete { max-width: 44rem; margin-bottom: var(--e8); }
.section__entete h2 { margin-top: 0; font-size: 1.9rem; font-weight: 400; }
.section__entete p { color: var(--encre-douce); }

.sur-titre {
  margin: 0 0 var(--e2); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte);
}

.accroche { padding: calc(var(--e8) * 1.8) 0 calc(var(--e8) * 1.6); border-bottom: 1px solid var(--trait); }
.accroche__grille { display: grid; gap: var(--e8); align-items: center; }
@media (min-width: 56rem) { .accroche__grille { grid-template-columns: 1.1fr 1fr; } }
.accroche__titre {
  font-size: clamp(2.2rem, 5vw, 3.3rem); font-weight: 400; line-height: 1.05;
  letter-spacing: -0.015em; margin-bottom: var(--e4); text-wrap: balance;
}
.accroche__chapeau { font-size: 1.12rem; color: var(--encre-douce); max-width: 36rem; text-wrap: pretty; }
.accroche__note { margin-top: var(--e3); font-size: .88rem; color: var(--encre-douce); }
.appel { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); align-items: center; margin-top: var(--e6); }
.bouton--principal { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.3rem; font-size: 1.1rem; }
.lien-fleche { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent-texte); }

/* L'exemple d'échéancier de la page d'accueil : un extrait de registre, pas une
   capture d'écran — composé avec les vrais états, il ne vieillit pas. */
.registre-exemple {
  margin: 0; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.registre-exemple__entete {
  display: flex; justify-content: space-between; gap: var(--e3); align-items: baseline;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait);
  font-family: var(--titre); font-size: 1.15rem;
}
.registre-exemple__liste { list-style: none; margin: 0; padding: 0; }
.ligne-etat {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem var(--e3); align-items: start;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait);
}
.ligne-etat:last-child { border-bottom: 0; }
.ligne-etat .icone { margin-top: .2rem; color: var(--neutre-500); }
.ligne-etat--en_retard { background: var(--alerte-clair); }
.ligne-etat--en_retard .icone { color: var(--alerte); }
.ligne-etat--en_cours .icone { color: var(--or-700); }
.ligne-etat--fait .icone { color: var(--encre-douce); }
.ligne-etat__quoi { font-size: .95rem; line-height: 1.35; }
.ligne-etat__source { display: block; font-size: .78rem; color: var(--encre-douce); }
.ligne-etat__quand { grid-column: 2; font-size: .85rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.ligne-etat--en_retard .ligne-etat__quand { color: var(--alerte); }

.piliers { display: grid; gap: var(--e6) var(--e8); }
@media (min-width: 44rem) { .piliers { grid-template-columns: 1fr 1fr; } }
.pilier { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e3); }
.pilier__icone {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--accent); border-radius: var(--rayon); color: var(--or-700);
}
.pilier h3 { margin: .35rem 0 var(--e2); font-size: 1.3rem; }
.pilier p { color: var(--encre-douce); margin: 0; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e6); counter-reset: etape; }
@media (min-width: 44rem) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etapes li { counter-increment: etape; padding-top: var(--e4); border-top: 1px solid var(--accent); }
.etapes li::before {
  content: counter(etape, upper-roman) "."; display: block; margin-bottom: var(--e2);
  font-family: var(--titre); font-size: 1.6rem; color: var(--accent-texte);
}
.etapes h3 { margin-bottom: var(--e2); font-size: 1.2rem; }
.etapes p { color: var(--encre-douce); margin: 0; }

.garanties { display: grid; gap: var(--e6); }
@media (min-width: 44rem) { .garanties { grid-template-columns: repeat(3, 1fr); } }
.garantie .icone { color: var(--or-700); margin-bottom: var(--e2); }
.garantie h3 { font-size: 1.15rem; margin-bottom: var(--e2); }
.garantie p { color: var(--encre-douce); margin: 0; font-size: .95rem; }

.bandeau-appel { text-align: center; }
.bandeau-appel h2 { margin-top: 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 400; text-wrap: balance; }
.bandeau-appel p { color: var(--encre-douce); max-width: 40rem; margin-left: auto; margin-right: auto; }
.bandeau-appel .appel { justify-content: center; }

/* Présentation détaillée : un sommaire, puis un module par section. */
.sommaire { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); list-style: none; margin: var(--e6) 0 0; padding: 0; }
.sommaire a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--trait); }
.sommaire a:hover { border-color: var(--accent); color: var(--or-700); }
.module { display: grid; gap: var(--e4) var(--e8); scroll-margin-top: var(--e4); }
@media (min-width: 52rem) { .module { grid-template-columns: 17rem 1fr; } }
.module__entete h2 { margin-top: var(--e2); font-size: 1.8rem; font-weight: 400; }
.module__entete p { color: var(--encre-douce); }
.module__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.module__liste li { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e3); }
.module__liste .icone { margin-top: .3rem; color: var(--or-700); }
.module__liste strong { display: block; font-family: var(--titre); font-size: 1.12rem; font-weight: 600; }
.module__liste p { margin: .15rem 0 0; color: var(--encre-douce); }
.bientot {
  display: inline-block; padding: .05rem .55rem; border: 1px solid var(--accent); border-radius: 999px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or-700); vertical-align: middle;
}

/* Tarifs. Le prix se lit au mois, la facturation annuelle est dite juste
   dessous, au même endroit : jamais en astérisque au bas de la page. */
.tarifs { display: grid; gap: var(--e4); margin-top: var(--e6); }
@media (min-width: 52rem) { .tarifs { grid-template-columns: repeat(3, 1fr); } }
.tarif {
  display: flex; flex-direction: column; padding: var(--e6) var(--e4);
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond);
}
.tarif--recommande { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.tarif__nom { margin: 0 0 var(--e3); font-size: 1.35rem; }
/* Chiffres alignés : les elzéviriens de Cormorant font lire « IO € » pour 10 €. */
.tarif__prix { margin: 0; font-family: var(--titre); font-size: 3rem; font-weight: 400; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.tarif__unite { font-family: var(--texte); font-size: .95rem; color: var(--encre-douce); margin-left: .2rem; }
/* Le tarif barré, à côté du prix de lancement. Il n'est pas décoratif : c'est
   ce qu'on paiera la troisième année, et le cacher rendrait l'offre trompeuse. */
.tarif__barre { font-family: var(--texte); font-size: 1.05rem; color: var(--encre-douce);
                text-decoration: line-through; margin-left: .45rem; vertical-align: .55em; }
.tarif__lancement { margin: var(--e1) 0 0; font-size: .88rem; font-weight: 600; color: var(--or-700); }
.tarif__facturation { margin: var(--e2) 0 var(--e4); font-size: .88rem; color: var(--encre-douce); min-height: 2.8em; }
.tarif__contenu { flex: 1; margin: 0 0 var(--e4); padding-top: var(--e4); border-top: 1px solid var(--trait); color: var(--encre-douce); font-size: .95rem; }
.tarif .bientot { align-self: flex-start; }
.questions { display: grid; gap: var(--e4) var(--e8); margin-top: var(--e6); }
@media (min-width: 44rem) { .questions { grid-template-columns: 1fr 1fr; } }
.questions h3 { font-size: 1.15rem; margin-bottom: var(--e2); }
.questions p { color: var(--encre-douce); margin: 0; }

/* Aperçu gratuit de l'échéancier. */
.apercu__liste { list-style: none; margin: 0 0 var(--e6); padding: 0; display: grid; gap: var(--e3); }
#resultat > .encart, #resultat > .carte { margin-bottom: var(--e4); }
.apercu__echeance {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3);
  padding: var(--e4); border: 1px solid var(--trait); border-radius: var(--rayon);
}
@media (min-width: 44rem) { .apercu__echeance { grid-template-columns: auto 1fr auto; } }
.apercu__echeance > .icone { margin-top: .25rem; color: var(--neutre-500); }
.apercu__echeance--en_cours { border-color: var(--accent); background: var(--accent-clair); }
.apercu__echeance--en_cours > .icone { color: var(--or-700); }
.apercu__echeance--en_retard { border-color: var(--alerte); background: var(--alerte-clair); }
.apercu__echeance--en_retard > .icone { color: var(--alerte); }
.apercu__titre { margin: 0; font-size: 1.15rem; }
.apercu__meta { margin: .15rem 0 0; font-size: .85rem; color: var(--encre-douce); }
.apercu__date { grid-column: 2; text-align: left; }
@media (min-width: 44rem) { .apercu__date { grid-column: 3; text-align: right; } }
/* Pas de chiffres tabulaires : une date écrite en toutes lettres est du texte,
   et Lora élargit alors les espaces (IDENTITE-VISUELLE.md, §3). */
.apercu__date strong { font-size: 1.05rem; }
.tarif-souscription { display: flex; flex-direction: column; gap: var(--e2); }
.tarif-souscription .tarif { flex: 1; }
.tarif-souscription form { margin: 0; }

/* Sur téléphone, le tableau des prochaines échéances passe en blocs : quatre
   colonnes dans 390 px mettaient l'intitulé d'une obligation sur cinq lignes et
   sa date sur quatre. L'exercice, qui perd son en-tête, reprend son étiquette. */
@media (max-width: 30rem) {
  .tableau-echeances thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-echeances tr {
    display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--e3);
    padding: var(--e3) 0; border-bottom: 1px solid var(--trait);
  }
  .tableau-echeances td { display: block; padding: 0; border: 0; }
  .tableau-echeances td:first-child { grid-column: 1 / -1; font-size: 1rem; }
  .tableau-echeances__exercice { font-size: .85rem; color: var(--encre-douce); }
  .tableau-echeances__exercice::before { content: attr(data-etiquette) " "; }
  .tableau-echeances td:nth-child(3) { grid-row: 3; }
  .tableau-echeances td:last-child { grid-row: 2 / 4; grid-column: 2; align-self: center; }
  .tableau-echeances tbody tr:hover { background: none; }
}

/* L'aperçu gratuit se présente comme une liste de questions sur l'association :
   une question par ligne, dans l'ordre où l'on y répond. */
.questions-apercu { max-width: 40rem; margin-bottom: var(--e6); }
.questions-apercu__liste { list-style: none; margin: 0; padding: 0; counter-reset: question; display: grid; gap: var(--e4); }
.questions-apercu__liste > li { counter-increment: question; display: grid; grid-template-columns: 2rem 1fr; }
.questions-apercu__liste > li::before {
  content: counter(question) "."; grid-row: 1 / span 3;
  font-family: var(--titre); font-size: 1.3rem; line-height: 1.2; color: var(--accent-texte);
}
.questions-apercu__liste > li > * { grid-column: 2; }
.questions-apercu fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.questions-apercu legend { padding: 0; margin-bottom: .25rem; font-weight: 600; }
.questions-apercu__date { display: grid; grid-template-columns: 6rem 1fr; gap: var(--e2); }
.questions-apercu .actions { margin-top: var(--e4); }

/* --- Menus du bandeau -------------------------------------------------------
   Des `<details>` plutôt qu'un menu en JavaScript, comme le sélecteur
   d'association : le produit n'a pas une ligne de script, et un menu qui
   dépend d'un script est un menu qui disparaît quand le script ne charge pas.

   La comptabilité porte à elle seule huit écrans depuis qu'elle a le budget,
   les factures et les défraiements. À plat, ils repoussaient « Fiche » et
   « Utilisateurs » hors de l'écran sur un portable. */
.menu-nav { position: relative; display: inline-flex; align-items: center; }
.menu-nav summary {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 2.9rem; white-space: nowrap; cursor: pointer;
  font-size: .95rem; color: var(--encre-douce); list-style: none;
}
.menu-nav summary::-webkit-details-marker { display: none; }
.menu-nav summary::after {
  content: "▾"; font-size: .8em; color: var(--neutre-400);
  transition: transform .15s ease;
}
.menu-nav[open] summary::after { transform: rotate(180deg); }
.menu-nav summary:hover { color: var(--or-700); }
/* L'état actif se marque comme sur un lien : un soulignement, jamais un aplat. */
.menu-nav--actif summary { color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent); }
.menu-nav ul {
  position: absolute; top: 100%; left: 0; z-index: 5;
  margin: 0; padding: .35rem; min-width: 14rem; list-style: none;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.menu-nav li a {
  display: block; min-height: 0; padding: .45rem .55rem; border-radius: 3px;
  color: var(--encre); text-decoration: none;
}
.menu-nav li a:hover { background: var(--or-100); color: var(--encre); }
/* Dans un menu déroulant, le soulignement du bandeau n'a pas de sens : c'est la
   graisse qui marque la page courante. */
.menu-nav li a[aria-current="page"] { font-weight: 600; box-shadow: none; }
.menu-nav__separation { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--trait); }