/* ==================================================================
   Charte — la structure, sur les couleurs de la maison
   Chambre d'Agriculture de Région Corse

   Cette feuille se charge en dernier, après prototype.css et app.css.

   Elle ne touche pas à la couleur. C'est le partage : les deux feuilles
   précédentes portent la palette — le vert institutionnel, le vert
   clair et le rouge du logo — et celle-ci porte la mise en forme : la
   typographie, les proportions, les arrondis, les hauteurs de clic, la
   barre latérale, l'en-tête de page.

   Une version antérieure de ce fichier redéfinissait aussi les
   couleurs. C'était une erreur de méthode autant que de goût : deux
   feuilles décidant de la même chose, et la dernière chargée qui gagne
   sans qu'on sache pourquoi. Une propriété a un propriétaire.

   Deux conséquences, à garder en tête avant d'y toucher.

   Une couleur écrite ici est une régression, sauf pour les quelques
   éléments que le prototype ne connaît pas — les jalons d'exercice, le
   relief du logo, la ligne calligraphique — qui n'ont personne d'autre
   pour les habiller. Partout ailleurs on passe par les variables, et
   le mode essai continue de basculer toute l'interface à l'orange en
   les redéfinissant.

   Et prototype.css porte un « ne pas modifier à la main » : il est
   régénéré depuis le prototype de référence. Les retouches de mise en
   forme vivent ici, nulle part ailleurs.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Ce que la charte ajoute au vocabulaire
   ------------------------------------------------------------------ */

:root{
  /*
   * Un seul réglage de palette, et il ne change pas de couleur : des
   * angles plus francs. Le prototype arrondissait à 6 px, ce qui se
   * remarque à peine ; à 10 px les cartes deviennent des cartes.
   */
  --r:10px;

  /*
   * Les dégradés, tous construits sur des verts que la maison emploie
   * déjà. Aucune teinte nouvelle : le haut et le bas d'un dégradé sont
   * deux nuances du vert institutionnel.
   */
  --fond-menu:linear-gradient(180deg,#0E3021 0%,#08190F 100%);
  --fond-bouton:linear-gradient(180deg,#00A447 0%,#00702F 100%);
  --filet-accent:linear-gradient(180deg,#78BE20 0%,rgba(120,190,32,0) 100%);
}

/* ------------------------------------------------------------------
   2. La typographie
   ------------------------------------------------------------------ */

body{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/*
 * Les montants s'alignent au chiffre près.
 *
 * .mono désignait une police à chasse fixe ; ce qu'on lui demandait en
 * réalité, c'est que les colonnes de chiffres tombent l'une sous
 * l'autre. Manrope sait le faire en chiffres tabulaires, et le tableau
 * reste alors dans la même police que le reste de la page.
 */
.mono{
  font-family:'Manrope',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  letter-spacing:0;
}

/* Les petites capitales : la respiration de cette charte. */
.side h4,
.sscat,
.field label,
.top .surtitre,
.kpi span{
  font-weight:700;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

h1,h2,h3{font-family:'Playfair Display',Georgia,serif;letter-spacing:0}

/* ------------------------------------------------------------------
   3. La barre latérale
   ------------------------------------------------------------------ */

.side{
  width:272px;flex:0 0 272px;
  background:var(--fond-menu);
  padding:0 0 18px;
  position:relative;
}

/* Le filet du bord droit, qui s'éteint vers le bas. */
.side::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:3px;
  background:var(--filet-accent);pointer-events:none;
}

.brand{padding:22px 22px 18px;margin-bottom:10px}
.brand b{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:23px;line-height:1.1;letter-spacing:0;
}
.brand span{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.5;
}

/* Les trois barres du logo se réduisent à un filet. */
.brand .bar{display:block;height:2px;margin:9px 0 8px;width:56px;
  background:linear-gradient(90deg,var(--vert-clair) 0%,rgba(120,190,32,0) 100%)}
.brand .bar i{display:none}

/*
 * L'avancement de l'exercice, sous le logo.
 *
 * Trois segments : rempli quand l'étape est votée, pointillé quand elle
 * est en préparation, éteint quand elle n'existe pas encore. La
 * question « qu'est-ce qui est voté aujourd'hui ? » revient à chaque
 * réunion, et il fallait jusqu'ici ouvrir un écran pour y répondre.
 */
.jalons{display:flex;gap:6px;margin-top:14px}
.jalons .jalon{flex:1;display:flex;flex-direction:column;gap:5px}
.jalons .jalon i{
  display:block;height:3px;border-radius:2px;
  background:rgba(255,255,255,.14);
}
/*
 * Une couleur par étape, les trois du logo, dans leur ordre.
 *
 * C'étaient les trois barres sous le nom de la Chambre ; elles disent
 * maintenant quelque chose — où en est l'exercice — au lieu de
 * décorer. Le vert institutionnel plutôt que le vert foncé pour le
 * budget initial : sur le fond du menu, le foncé ne se verrait pas.
 */
.jalons .jalon:nth-child(1){--teinte:var(--vert)}
.jalons .jalon:nth-child(2){--teinte:var(--vert-clair)}
.jalons .jalon:nth-child(3){--teinte:var(--rouge)}

.jalons .jalon.prepare i{
  background:repeating-linear-gradient(90deg,
    var(--teinte) 0 4px,transparent 4px 8px);
}
.jalons .jalon.votee i{background:var(--teinte)}
.jalons .jalon span{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7C9789;
}
.jalons .jalon.prepare span,
.jalons .jalon.votee span{color:#A9C0B4}

.side h4{padding:18px 22px 7px;font-size:10.5px}
.side h4 .reserve{font-size:9px;letter-spacing:.1em;padding:1px 8px}

/* Les entrées : 44 px, une icône au trait, aucun relief. */
.nav a,
.nav button{
  display:flex;align-items:center;gap:11px;
  width:100%;min-height:44px;text-align:left;
  padding:0 18px 0 17px;
  font-size:14.5px;font-weight:500;
  border-radius:0 8px 8px 0;
}
.nav a.on,
.nav button.on{border-left-width:2px;padding-left:18px}

/* Ce à quoi le rôle ne donne pas droit s'efface, sans relief. */
.nav a:disabled,
.nav button:disabled{opacity:.5;background:none;cursor:not-allowed}

.nav .ic{flex:0 0 18px;width:18px;height:18px;opacity:.82}
.nav a.on .ic,
.nav button.on .ic{opacity:1;color:var(--vert-clair)}
.nav .t{flex:1;min-width:0}

.sscat{min-height:40px;padding:0 22px;font-size:10.5px}
.nav.sous a,
.nav.sous button{padding-left:46px;font-size:13.5px;min-height:40px}
.nav.sous a::before,
.nav.sous button::before{margin-left:-15px;width:4px;height:4px}

.moi{margin-top:auto;padding:16px 22px 0}
.moi button{
  font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:4px 0;
}

/* La seule ligne calligraphique de toute l'application. */
.signature{
  padding:12px 22px 0;
  font-family:'Dancing Script',cursive;font-weight:600;font-size:16px;
  color:#68806F;line-height:1.3;
}

/* ------------------------------------------------------------------
   4. L'en-tête de page
   ------------------------------------------------------------------ */

.top{
  padding:22px 34px 20px;
  gap:22px;align-items:flex-end;
  box-shadow:0 1px 3px rgba(11,36,23,.06);
}
.top .surtitre{display:block;color:var(--vert-fonce);margin-bottom:6px}
.top h1{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:40px;line-height:1.05;letter-spacing:-.005em;
  color:var(--vert-nuit);
}

/*
 * Le dernier mot du titre, dans le vert du logo.
 *
 * Il tient à 3,4:1 sur du blanc : en dessous du seuil d'un texte
 * courant, au-dessus de celui des grands caractères gras — et c'est
 * exactement ce dont il s'agit, 40 px en 900.
 */
.top h1 .accent{color:var(--vert)}

.top .sub{
  margin-top:8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

/* ------------------------------------------------------------------
   5. Champs et boutons
   ------------------------------------------------------------------ */

.field label{margin-bottom:5px}

select,input[type=text]{min-height:44px;border-radius:10px;padding:0 12px}
select:focus,input[type=text]:focus,textarea:focus{
  outline:none;border-color:var(--vert);
  box-shadow:0 0 0 3px rgba(0,150,64,.16);
}
input[readonly],input:disabled,select:disabled{cursor:not-allowed}

.mini,.bouton,.add,.ok,.primaire{border-radius:10px}
.mini{min-height:38px;padding:0 15px;font-size:13px;font-weight:600}

/*
 * Le bouton principal prend un dégradé, entre deux nuances du vert
 * institutionnel. Rien de neuf en couleur : le même vert, avec un
 * relief qui dit qu'on peut cliquer.
 */
.mini.primaire,
.bouton,
.modal>footer .ok,
.import .primaire,
.reprise .primaire{
  min-height:44px;padding:0 18px;
  background:var(--fond-bouton);
  border:1px solid var(--vert-fonce);
  font-weight:700;
}
.mini.primaire:hover,
.bouton:hover,
.modal>footer .ok:hover,
.import .primaire:hover,
.reprise .primaire:hover{background:var(--vert-fonce)}

/* Toute zone qu'on vise au doigt fait 44 px. */
.add,.pole-lock,.confmiss{min-height:44px}

/* ------------------------------------------------------------------
   6. Cartes et bandeaux
   ------------------------------------------------------------------ */

.cafbox,.import,.reprise,.essai-bloc,.pilote,.cadenas,.etat,.picker{
  border-radius:14px;
  box-shadow:0 1px 3px rgba(11,36,23,.05);
}

/* ------------------------------------------------------------------
   7. Tuiles de chiffres et titres de section
   ------------------------------------------------------------------ */

.kpis{gap:14px;margin-bottom:26px}
.kpi{border-radius:14px;padding:16px 18px;gap:6px}
.kpi span{font-size:10.5px}
.kpi b{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;font-size:24px;letter-spacing:0;
}

/* Le titre de section, et son filet qui file vers la droite. */
.sh{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vert-fonce);
  border-bottom:none;padding-bottom:0;
  margin:30px 0 14px;
  display:flex;align-items:center;gap:14px;
}
.sh::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--vert) 0%,rgba(0,150,64,0) 100%);
}

/* ------------------------------------------------------------------
   8. Le choix de la nomenclature
   ------------------------------------------------------------------ */

/*
 * Un menu, pas un classement.
 *
 * Les neuf nomenclatures sont au même niveau : les présenter
 * différemment selon leur poids laisserait croire à une hiérarchie qui
 * n'existe pas. Même taille, même graisse, même couleur ; seule
 * l'entrée courante se distingue.
 */
.tabs.nomenclatures{
  display:flex;flex-wrap:wrap;align-items:center;gap:3px;
  margin-bottom:22px;
}
.tabs.nomenclatures .onglet{
  display:inline-flex;align-items:baseline;gap:8px;
  min-height:44px;padding:0 14px;
  font-size:13.5px;
}
.tabs.nomenclatures .amt{margin-left:0}

/* ------------------------------------------------------------------
   9. Tableaux
   ------------------------------------------------------------------ */

.wrap,.synth,.block,.pgroup,.grid.ro{
  border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(11,36,23,.06);
}

.grid th,.ledger th{font-size:10.5px;letter-spacing:.18em;padding:12px 14px;border:none}
.grid td,.ledger td{padding:10px 14px;border-left:none;border-right:none}
.grid tr:last-child td{border-bottom:none}

/* Aucune bordure verticale nulle part. */
table.comp td,table.comp th{border-left:none;border-right:none}

/* ------------------------------------------------------------------
   10. Saisie
   ------------------------------------------------------------------ */

.grid input.num,.art input[type=text],.mmontant input{min-height:40px;border-radius:9px}
.grid input.num:focus,.art input[type=text]:focus,.mmontant input:focus{
  border-color:var(--vert);box-shadow:0 0 0 3px rgba(0,150,64,.16);
}

.modal{border-radius:16px;overflow:hidden}
.modal h2{font-family:'Playfair Display',Georgia,serif;font-weight:700}
.empty{border-radius:14px}
.chip{min-height:38px;padding:0 16px}

/* ------------------------------------------------------------------
   11. Connexion et inscription
   ------------------------------------------------------------------ */

.carte{border-radius:18px;box-shadow:0 2px 12px rgba(11,36,23,.08)}
.carte .marque{text-align:center;padding-bottom:6px}
.carte .marque .bar,
.carte .marque span{display:none}
.carte .marque b{
  display:block;
  font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:21px;
  color:var(--vert-fonce);letter-spacing:.01em;
}
.carte h1{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900;font-size:30px;color:var(--vert-nuit);margin-top:18px;
}
.carte h1 .accent{color:var(--vert)}

/* Seuls les intitulés de champ passent en petites capitales : une case
   à cocher porte une phrase, qui doit se lire comme une phrase. */
.carte label:not(:has(input)){
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vert-fonce);
}
.carte .bouton{width:100%;justify-content:center}

/* ------------------------------------------------------------------
   12. Le logo de la Chambre
   ------------------------------------------------------------------ */

/*
 * Le relief, par ombres portées empilées.
 *
 * Deux ombres opaques décalées d'un pixel chacune épousent le contour
 * du « a » et lui donnent une tranche ; la troisième, floue et
 * lointaine, le décolle du papier. L'image, elle, n'est ni tournée ni
 * étirée — la règle de toutes les chartes graphiques, et la seule
 * manière d'obtenir du relief sans y contrevenir. Au-delà de deux
 * tranches, le halo mordait sur les petites lettres du logotype.
 *
 * drop-shadow suit la transparence du fichier, contrairement à
 * box-shadow qui aurait dessiné un rectangle autour.
 */
.carte .logo{
  display:block;width:220px;height:auto;margin:0 auto 6px;
  filter:
    drop-shadow(0 1px 0 rgba(11,36,23,.24))
    drop-shadow(0 2px 0 rgba(11,36,23,.13))
    drop-shadow(0 10px 13px rgba(11,36,23,.22));
}

@media (max-width:480px){
  .carte .logo{width:min(220px,70%)}
}

/* Un système réglé sur « moins d'animations » obtient un logo à plat. */
@media (prefers-reduced-motion:reduce){
  .carte .logo{filter:drop-shadow(0 2px 6px rgba(11,36,23,.18))}
}

/* ------------------------------------------------------------------
   13. Sous 1100 px : le menu passe en bandeau
   ------------------------------------------------------------------ */

@media (max-width:1100px){
  .app{display:block}
  .side{
    width:auto;flex:none;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:4px;padding:10px 16px;
  }
  .side::after{top:auto;left:0;right:0;bottom:0;width:auto;height:2px;
    background:linear-gradient(90deg,var(--vert-clair) 0%,rgba(120,190,32,0) 100%)}
  .brand{border-bottom:none;margin:0;padding:0 18px 0 0;flex:0 0 auto}
  .brand b{font-size:19px}
  .brand span,.brand .bar,.jalons,.signature{display:none}
  .side>div{display:contents}
  .side h4{padding:0 10px 0 0;font-size:9.5px}
  .nav{display:flex;flex-wrap:wrap;gap:2px}
  .nav a,.nav button{width:auto;min-height:40px;border-radius:8px;border-left:none}
  .nav a.on,.nav button.on{border-left:none;padding-left:18px}
  .nav.sous a::before,.nav.sous button::before{display:none}
  .nav.sous a,.nav.sous button{padding-left:14px}
  .moi{margin-left:auto;border-top:none;padding:0;display:flex;align-items:center;gap:10px}
  .top{padding:18px 20px}
  .top h1{font-size:30px}
}

/* ------------------------------------------------------------------
   14. À l'impression : du blanc, et rien qui ne serve la lecture
   ------------------------------------------------------------------ */

@media print{
  body{background:#fff}
  .side,.tabs,.picker,.addzone,.filtremod,.bandeau-essai{display:none}
  .app{display:block}
  .top{background:#fff;box-shadow:none;padding:0 0 12px}
  .wrap,.synth,.block,.pgroup,.kpi,.grid.ro{box-shadow:none}
}

/* ------------------------------------------------------------------
   15. Le dessin des tableaux
   ------------------------------------------------------------------ */

/*
 * Des filets qui ne touchent pas le bord.
 *
 * Un trait qui court d'un bord à l'autre du cadre fait du tableau une
 * grille ; retiré de quelques pixels, il ne sépare plus que ce qu'on
 * lit. Le cadre arrondi reprend alors son rôle de cadre, et la page
 * respire sans qu'on ait rien enlevé.
 *
 * Le procédé passe par une ombre intérieure plutôt que par une
 * bordure : une bordure appartient à la cellule et va jusqu'à son
 * bord, alors qu'une ombre se pose où on veut.
 */
.grid tbody td,
.synth tbody td{
  border-bottom:none;
  box-shadow:inset 0 -1px 0 var(--line);
}
.grid tbody tr:last-child td,
.synth tbody tr:last-child td{box-shadow:none}

/* Aux deux extrémités, le filet s'arrête avant le cadre. */
.grid tbody td:first-child,
.synth tbody td:first-child{
  padding-left:16px;
  background-clip:padding-box;
}
.grid tbody td:last-child,
.synth tbody td:last-child{padding-right:16px}

/*
 * Un peu d'air avant chaque rupture.
 *
 * Une ligne de section ou de poste ouvre un ensemble ; la coller à ce
 * qui précède la fait lire comme une ligne de plus.
 */
tr.ssect td,tr.stitre td,tr.sposte td,
.grid tr.mission td,.ledger tr.poste td{
  padding-top:11px;padding-bottom:11px;
}
tr.ssect td,tr.sposte td,.grid tr.mission td{
  box-shadow:inset 0 1px 0 rgba(0,0,0,.06),inset 0 -1px 0 var(--line);
}

/*
 * La ligne survolée se détache.
 *
 * Sur une table de quarante comptes et cinq colonnes, l'œil perd sa
 * ligne entre le libellé et le montant. Seules les lignes ordinaires
 * réagissent : une ligne de section n'est pas une ligne qu'on suit.
 */
.grid tbody tr:not([class]):hover td,
.synth tbody tr:not([class]):hover td{background:var(--surface-2)}
.grid tbody tr.cptrow:hover td{background:var(--surface-2)}

/*
 * Sur un comparatif large, la première colonne ne part pas.
 *
 * Sept pôles en colonnes, et l'on fait défiler vers la droite jusqu'à
 * ne plus savoir quelle ligne on lit. La colonne des libellés reste
 * donc collée au bord gauche pendant le défilement.
 *
 * Elle doit pour cela être opaque, sans quoi le tableau défilerait au
 * travers. Les lignes de section, de total et de résultat le sont
 * déjà — elles ont leur couleur ; seules les lignes ordinaires, qui
 * n'ont pas de fond, ont besoin qu'on leur en donne un.
 */
.wrap.scroll table.comp th:first-child,
.wrap.scroll table.comp td:first-child{
  position:sticky;left:0;z-index:2;
}
.wrap.scroll table.comp tbody tr:not([class]) td:first-child{
  background-color:var(--surface);
}

/*
 * Le bord de la colonne figée : une ombre portée vers la droite, qui
 * dit qu'il y a autre chose derrière. Elle ne dessine pas une
 * séparation verticale de plus, elle marque une profondeur.
 */
.wrap.scroll table.comp th:first-child::after,
.wrap.scroll table.comp td:first-child::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:7px;
  transform:translateX(100%);
  background:linear-gradient(90deg,rgba(18,33,26,.09),rgba(18,33,26,0));
  pointer-events:none;
}
/* Le cadre reprend la main sur le coin : sans cela, la couleur d'une
   ligne de section dépasse de l'arrondi. */
.wrap,.synth{isolation:isolate}

/* ------------------------------------------------------------------
   16. Le relief des bandeaux
   ------------------------------------------------------------------ */

/*
 * Les lignes de tête prennent de l'épaisseur.
 *
 * Aucune couleur n'est touchée : ce sont des voiles de blanc et de
 * noir transparents posés par-dessus. Un filet clair en haut, une
 * ombre douce en bas, et un dégradé qui éclaire la moitié supérieure —
 * de quoi lire la bande comme un relief plutôt que comme un aplat.
 *
 * La retenue est volontaire. Un budget se relit longtemps, et un
 * tableau qui brille fatigue avant la fin de la page ; ce qu'on veut,
 * c'est que l'œil trouve les ruptures sans avoir à les chercher.
 */
tr.stitre td,
tr.ssect td,
tr.stot td,
tr.sres td,
tr.ssolde td,
.grid tr.mission td,
.ledger tr.poste td{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.04) 48%,
    rgba(0,0,0,.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 1px 2px rgba(18,33,26,.07);
  position:relative;
}

/* Le total et le résultat ferment un ensemble : leur relief appuie un
   peu plus, et l'ombre porte vers le bas plutôt que vers le haut. */
tr.stot td,
tr.sres td,
tr.ssolde td{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 3px rgba(18,33,26,.09);
}

/* L'en-tête de tableau garde son aplat : il est déjà porté par le
   cadre, et un second relief au-dessus du premier ferait carton. */
.grid th,.ledger th{background-image:none;box-shadow:none}

/* ------------------------------------------------------------------
   17. La section d'investissement, au tableau de bord
   ------------------------------------------------------------------ */

/*
 * Elle se lit à part, elle doit se voir à part.
 *
 * L'investissement ne se finance pas sur les mêmes ressources que le
 * fonctionnement, et son solde ne s'ajoute pas au résultat qui le
 * précède. Un décrochement — de l'air au-dessus, un léger creux
 * dessous — vaut mieux qu'un troisième bandeau de même facture, qui
 * laissait croire à une suite.
 */
.synth tr.sinv td{
  border-top:3px double var(--line-strong);
  padding-top:15px;
}
.synth tr.linv td{
  background-color:var(--surface-2);
  box-shadow:inset 0 -1px 0 var(--line),inset 4px 0 0 rgba(0,112,47,.22);
}
.synth tr.ssolde.linv td{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.12),
    inset 4px 0 0 rgba(0,112,47,.45),
    0 2px 3px rgba(18,33,26,.09);
}
.synth tr.linv td:first-child{padding-left:19px}