/* ==========================================================================
   AEC REVISION — charte reprise d'OBETAF (aec-obnl-app, views/shared-contents).
   Memes variables, meme squelette : rail d'icones a gauche, bandeau de contexte
   en haut, aire de travail sombre sur fond photographique.

   🔑 Principe de lisibilite : le CHROME est sombre (rail, bandeau, titres de
   section, alertes), la DONNEE est sur fond blanc opaque. Un tableau de comptes
   translucide pose sur une photo ne se lit pas — et un tableau de comptes doit
   se lire avant de faire joli.
   ========================================================================== */

:root {
  --primary: #419488;
  --appBgColor: #419488;
  --appBgColorLight: #a0cdc6;
  --appBgColor2: #E4DEB9;
  --appBgColor3: #BF1B22;
  --appColor: #ffffff;
  --appHeaderBgColor: #96750D;
  --appHeaderDarkBgColor: #3E3316;
  --appErrorColor: #DC4B3E;
  --appSuccessColor: #0DC143;
  --appGrayColor: #9F9F9F;

  --aire: rgba(64, 60, 60, .92);
  --trait: rgba(255, 255, 255, .14);
  --encre-claire: #f2f4f3;
  --encre-douce: #c6cbc8;

  /* surfaces de donnees, opaques */
  --papier: #ffffff;
  --papier-gris: #f4f6f7;
  --encre: #23312c;
  --encre-grise: #6b7a74;
  --bord: #dde3e1;
  --rouge: #a8261b;
  --rail: 5em;
}

* , *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--appHeaderDarkBgColor) url('/img/fond.jpg') center bottom / 100% no-repeat;
  color: var(--encre-claire);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--appBgColorLight); text-decoration: none; }
a:hover { color: var(--appColor); }

/* ------------------------------------------------------------ chargement -- */
#chargement {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
#chargement .marque { text-align: center; }
#chargement img { display: block; margin: 0 auto 10px; width: 96px; height: 96px; }
#chargement .nom { color: var(--appBgColor); font-size: 1.25em; font-weight: bold; letter-spacing: .06em; }
#chargement .slogan { color: var(--appBgColor); font-size: .82em; }

/* ------------------------------------------------- rail d'icones a gauche -- */
#rail {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: var(--rail); height: 100vh;
  background: var(--appHeaderBgColor);
  overflow-x: hidden; overflow-y: auto;
  transition: width .35s cubic-bezier(.175, .685, .32, 1);
}
#rail:hover { width: 16em; }
#rail ul { margin: 0; padding: 0; list-style: none; }
#rail .rail-logo {
  height: var(--rail); margin-bottom: 1.4em;
  background: var(--appHeaderDarkBgColor);
  display: flex; align-items: center;
}
#rail .rail-logo img { width: 40px; height: 40px; margin: 0 auto; margin-left: 15px; display: block; }
#rail .rail-item { width: 100%; padding: 0 .5em; }
#rail .rail-lien {
  display: flex; align-items: center; width: 100%;
  padding: .85em 0; border-radius: .25em;
  color: rgba(255, 255, 255, .78); white-space: nowrap;
  transition: all .2s cubic-bezier(.175, .685, .32, 1);
}
#rail .rail-lien:hover { color: #fff; background: rgba(0, 0, 0, .22); }
#rail .rail-lien.actif { color: #fff; background: rgba(0, 0, 0, .32); }
#rail .rail-icone {
  width: calc(var(--rail) - 1em - 8px); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.35em;
}
#rail .rail-texte { font-size: .95em; }
#rail .rail-fleche { margin-left: auto; padding-right: .8em; color: var(--appBgColor2); }

/* ------------------------------------------------------------ aire ------- */
#aire {
  margin-left: var(--rail); min-height: 100vh;
  background: var(--aire); display: flex; flex-direction: column;
}
.bandeau-contexte {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .55rem 1.2rem; border-bottom: 1px solid var(--trait);
  background: rgba(0, 0, 0, .3);
}
.pastille {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .2rem .7rem; border: 1px solid var(--trait); border-radius: 14px;
  font-size: .82em; color: var(--encre-douce); background: rgba(255, 255, 255, .06);
}
.pastille .voyant { font-size: .55em; }
/* Une pastille cliquable doit se voir cliquable : le selecteur d'exercice est
   la seule facon de changer d'annee, et rien d'autre ne le dit. */
a.pastille.cliquable { text-decoration: none; transition: all .18s ease; }
a.pastille.cliquable:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--appBgColor2);
  color: #fff;
}
.voyant.vert { color: var(--appSuccessColor); }
.voyant.rouge { color: var(--appErrorColor); }
.voyant.or { color: var(--appBgColor2); }
.bandeau-contexte .droite { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.bandeau-contexte .droite a { font-size: .85em; }

.contenu { padding: 1.4rem 1.6rem 2.4rem; flex: 1; }

/* ----------------------------------------------------- titres de section -- */
.section-titre h1 {
  font-size: 1.3em; margin: 0 0 .2rem; color: var(--appColor);
  display: flex; align-items: center; gap: .55rem;
}
.section-titre .citation {
  font-size: .92em; font-weight: normal; color: var(--encre-douce); margin: 0 0 1.2rem;
}
.section-titre .citation .fa { opacity: .5; font-size: .82em; }
h2 {
  font-size: 1.02em; color: var(--appBgColor2); margin: 1.8rem 0 .7rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--trait);
  display: flex; align-items: center; gap: .5rem;
}
.contenu > p.sous { color: var(--encre-douce); }

/* ==========================================================================
   SURFACES DE DONNEES — opaques, encre sombre.
   ========================================================================== */
.carte {
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--bord); border-radius: 6px;
  padding: 1rem 1.2rem; margin-bottom: 1.1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.carte.serree { padding: 0; overflow: hidden; }
.carte a { color: var(--appBgColor); }
.carte a:hover { color: #2c6a61; text-decoration: underline; }
.carte .sous { color: var(--encre-grise); }
.carte strong { color: var(--encre); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .85rem; }

/* ------------------------------------------------------------ tableaux --- */
table {
  width: 100%; border-collapse: collapse; font-size: .88em;
  background: var(--papier); color: var(--encre);
}
th, td { padding: .45rem .7rem; text-align: left; vertical-align: top;
         border-bottom: 1px solid var(--bord); }
th {
  background: var(--appHeaderDarkBgColor); color: var(--appBgColor2);
  font-size: .78em; text-transform: uppercase; letter-spacing: .04em; font-weight: bold;
  position: sticky; top: 0; z-index: 2; border-bottom: none;
}
tbody tr:nth-child(even) { background: var(--papier-gris); }
tbody tr:hover { background: #e8f1ef; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.section td {
  background: var(--appBgColor2); color: #4a3a05;
  font-weight: bold; text-transform: uppercase; font-size: .8em; letter-spacing: .05em;
}
tr.total td {
  background: #ddeeeb; color: var(--encre); font-weight: bold;
  border-top: 2px solid var(--appBgColor); border-bottom: 2px solid var(--appBgColor);
}
tfoot tr.total td { position: sticky; bottom: 0; z-index: 2; }
.neg { color: var(--rouge); }
.defile { max-height: 68vh; overflow: auto; background: var(--papier); }

/* ------------------------------------------------------------ alertes ---- */
/* Les alertes vivent hors des cartes, sur le fond sombre : elles restent claires. */
.alerte {
  border-left: 4px solid; border-radius: 4px; padding: .65rem 1rem;
  margin-bottom: .65rem; font-size: .92em;
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(0, 0, 0, .3); color: var(--encre-claire);
}
.alerte .fa { margin-top: .18rem; }
.alerte.grave { background: rgba(140, 34, 26, .82); border-color: #ff8f85; }
.alerte.attention { background: rgba(110, 86, 10, .85); border-color: var(--appBgColor2); }
.alerte.ok { background: rgba(14, 92, 48, .82); border-color: #7ce39c; }
.carte .alerte { color: var(--papier); }

/* ---------------------------------------------------- formulaires -------- */
label { display: block; font-size: .78em; color: var(--encre-grise); margin-bottom: .22rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .45rem .6rem; font: inherit; font-size: .92em;
  color: var(--encre); background: #f7f9f9;
  border: 1px solid var(--bord); border-radius: 4px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--appBgColor); background: #fff;
}
input[readonly] { background: #eef1f0; color: var(--encre-grise); }
textarea { min-height: 5.5rem; resize: vertical; }
::placeholder { color: #9aa8a3; opacity: 1; }
label.case {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .86em;
  color: var(--encre); margin: 0 1rem .35rem 0;
}
label.case input { width: auto; margin: 0; }
.dossiers {
  display: flex; flex-wrap: wrap; gap: 0 .4rem; margin-top: .35rem;
  padding: .5rem .7rem; background: var(--papier-gris);
  border: 1px solid var(--bord); border-radius: 4px; max-height: 9rem; overflow: auto;
}
form.enligne { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }

/* -------------------------------------------------------------- boutons -- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .85rem; font: inherit; font-size: .86em; cursor: pointer;
  border: 1px solid var(--bord); border-radius: 3px;
  background: #fff; color: var(--appBgColor); text-decoration: none;
}
.btn:hover { filter: brightness(.95); color: var(--appBgColor); text-decoration: none; }
.btn.principal { background: var(--appBgColor); color: #fff; border-color: var(--appBgColor); }
.btn.principal:hover { color: #fff; }
.btn.or { background: var(--appHeaderBgColor); color: #fff; border-color: var(--appHeaderBgColor); }
.btn.or:hover { color: #fff; }
.btn.vert { background: #1EA362; color: #fff; border-color: #1EA362; }
.btn.vert:hover { color: #fff; }
.btn.danger { background: #fff; color: var(--rouge); border-color: var(--rouge); }
.btn.danger:hover { color: #fff; background: var(--appErrorColor); border-color: var(--appErrorColor); }
.barre-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: .2rem 0 1.1rem; }

/* ----------------------------------------- cartes retournables (balances) -- */
.centre-cartes {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  justify-content: space-around; margin-top: 1.4rem;
}
.centre-cartes .bloc { display: flex; flex-direction: column; }
.centre-cartes .bloc .titre {
  text-align: center; color: var(--appColor); font-weight: bold; letter-spacing: .05em;
}
.carte-retournable {
  width: 300px; height: 300px; margin-top: 14px; perspective: 1000px;
  background: #fff; border: 1px solid var(--bord);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.carte-retournable .dedans {
  position: relative; width: 100%; height: 100%; text-align: center;
  transition: transform .8s; transform-style: preserve-3d;
}
.carte-retournable:hover .dedans { transform: rotateY(180deg); }
.carte-retournable .face, .carte-retournable .dos {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.carte-retournable .face { background: #fff; }
.carte-retournable .face img { width: 100%; height: 100%; object-fit: cover; }
.carte-retournable .flou { position: absolute; inset: 0; background: rgba(219, 73, 58, .5); }
.carte-retournable .dos {
  transform: rotateY(180deg); background: var(--appHeaderDarkBgColor); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem;
}
.carte-retournable .dos h3 { margin: 0; font-size: 1.15em; color: var(--appBgColor2); }
.carte-retournable .dos p { margin: 0; font-size: .85em; color: var(--encre-douce); word-break: break-word; }

/* ------------------------------------------------------ tuiles de cycle --- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .85rem; }
.tuile {
  display: block; padding: .9rem 1rem; border-radius: 6px;
  background: var(--papier); color: var(--encre); border: 1px solid var(--bord);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22); transition: all .18s;
}
.tuile:hover {
  background: #eef6f4; border-color: var(--appBgColor); color: var(--encre);
  transform: translateY(-2px);
}
.tuile .lettre {
  display: inline-block; width: 2.1rem; height: 2.1rem; line-height: 2.1rem;
  text-align: center; border-radius: 4px; margin-bottom: .5rem;
  background: var(--appHeaderBgColor); color: #fff; font-weight: bold;
}
.tuile .nom { display: block; font-weight: bold; margin-bottom: .2rem; color: var(--encre); }
.tuile .compte { font-size: .82em; color: var(--encre-grise); }

.eti {
  display: inline-block; padding: .08rem .45rem; border-radius: 3px; font-size: .76em;
  background: var(--papier-gris); color: var(--encre-grise); border: 1px solid var(--bord);
}
.vide { color: var(--appGrayColor); font-style: italic; }
.sous { font-size: .92em; }
.pied {
  padding: 1rem 1.6rem 1.6rem; color: rgba(255, 255, 255, .42); font-size: .78em;
  border-top: 1px solid var(--trait);
}
.aucune-donnee { text-align: center; padding: 2rem 1rem; }
.aucune-donnee img { width: 170px; opacity: .85; }

/* ----------------------------------------------------------- connexion --- */
body.page-connexion {
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: #1b2b27; overflow: hidden; position: relative;
}

/* --- fond anime : des colonnes qui respirent, comme celles du logo -------- */
.fond-colonnes { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.fond-colonnes span {
  position: absolute; bottom: 0;
  left: var(--x); width: var(--l); height: var(--h);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(to top, rgba(65, 148, 136, .30), rgba(160, 205, 198, .07));
  transform-origin: bottom;
  animation: respirer var(--d) ease-in-out var(--r) infinite;
}
.fond-colonnes span:nth-child(3n) {
  background: linear-gradient(to top, rgba(150, 117, 13, .30), rgba(228, 222, 185, .07));
}
@keyframes respirer {
  0%, 100% { transform: scaleY(.62); opacity: .5; }
  50%      { transform: scaleY(1);   opacity: .95; }
}
/* Un fond decoratif ne doit pas bouger quand le systeme demande le contraire. */
@media (prefers-reduced-motion: reduce) {
  .fond-colonnes span { animation: none; transform: scaleY(.8); }
}
.page-connexion .boite-connexion { position: relative; z-index: 1; }
.boite-connexion {
  width: 100%; max-width: 400px; background: #fff; color: var(--encre);
  border-radius: 8px; padding: 1.8rem 2rem 1.4rem; box-shadow: 0 14px 44px rgba(0, 0, 0, .4);
}
.boite-connexion img.logo { display: block; margin: 0 auto .5rem; width: 84px; height: 84px; }
.boite-connexion h1 {
  font-size: 1.35em; letter-spacing: .07em; text-align: center;
  margin: 0; color: var(--appBgColor);
}
.boite-connexion .slogan { text-align: center; font-size: .82em; color: var(--encre-grise); margin: .1rem 0 1.3rem; }
.boite-connexion label { margin-top: .85rem; }
.boite-connexion .mdp { position: relative; }
.boite-connexion .mdp input { padding-right: 2.8rem; }
.oeil {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; background: transparent; color: var(--encre-grise);
  border: none; border-radius: 4px; cursor: pointer; transition: color .15s, background .15s;
}
.oeil:hover { color: var(--appBgColor); background: #eef2f1; }
.oeil:focus-visible { outline: 2px solid var(--appBgColor); outline-offset: 1px; }
.boite-connexion .btn.large {
  width: 100%; margin-top: 1.2rem; padding: .55rem; justify-content: center;
  background: var(--appBgColor); color: #fff; border-color: var(--appBgColor);
}
.boite-connexion .note, .boite-connexion .note * { margin: 1.1rem 0 0; font-size: .76em;
  color: var(--encre-grise); line-height: 1.45; }
.boite-connexion .alerte { background: #fbeceb; color: #7a1c15; border-color: var(--appErrorColor); }

@media (max-width: 760px) {
  :root { --rail: 3.4em; }
  #rail:hover { width: 13em; }
  .contenu { padding: 1rem .9rem 2rem; }
  .carte-retournable { width: 250px; height: 250px; }
}

/* Le sable (--appBgColor2) est fait pour le fond sombre : sur une surface
   blanche il disparait. Sur papier, ces reperes passent en or fonce. */
.carte .voyant.or, table .voyant.or, .carte .fa-unlink { color: var(--appHeaderBgColor); }

/* ==========================================================================
   MODALE D'IMPORT — reprise de la w3-modal d'OBETAF et de sa file-drop-zone.
   ========================================================================== */
.modale {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .62); padding: 3vh 1rem; overflow: auto;
}
.modale.ouverte { display: block; }
.modale-contenu {
  position: relative; max-width: 620px; margin: 0 auto;
  background: var(--papier); color: var(--encre);
  border-radius: 6px; padding: 1.6rem 1.8rem 1.4rem;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .5);
}
.modale-fermer {
  position: absolute; top: .3rem; right: .6rem;
  background: none; border: none; font-size: 1.9rem; line-height: 1;
  color: var(--encre-grise); cursor: pointer; padding: .2rem .5rem;
}
.modale-fermer:hover { color: var(--rouge); }
.modale h3 {
  margin: 0 0 1rem; font-size: 1.1em; color: var(--encre);
  display: flex; align-items: center; gap: .5rem;
}
.modale-pied {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--bord);
}

/* chips de format, comme .import-file-options */
ul.options-import {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 0 1.2rem; padding: 0;
}
ul.options-import li {
  display: block; list-style: none; padding: .18rem .8rem; border-radius: 10px;
  background: var(--appBgColor); color: #fff; font-size: .84em; cursor: default;
}
ul.options-import li.action { cursor: pointer; background: var(--appHeaderBgColor); }
ul.options-import li.action:hover { filter: brightness(1.1); }

/* zone de depot */
.depot {
  display: block; border: 2px dashed #8E8E8E; border-radius: 10px;
  min-height: 190px; margin: 0 auto; padding: 20px;
  background: #E2E2E2; color: #3b4a44; text-align: center;
}
.depot.survol { border: 4px dashed var(--appBgColor); background: #d9ecea; }
.depot input[type="file"] { display: none; }
.depot p { margin: 1.4rem 0 1rem; font-size: .92em; }
.depot .choisir {
  display: inline-block; padding: .35rem .9rem; border-radius: 3px;
  background: var(--appBgColor); color: #fff; cursor: pointer; font-size: .88em;
}
.depot .choisir:hover { filter: brightness(1.08); }
.depot .verdict { display: block; margin-top: 1rem; font-size: .88em; min-height: 1.4em; }
.depot .verdict .ok { color: #157a3c; }
.depot .verdict .ko { color: var(--rouge); }
.depot .nom-fichier { display: block; margin-top: .3rem; font-size: .82em; color: #55635d; word-break: break-all; }

.avertissement-ecrasement {
  margin-top: 1.1rem; text-align: center; font-size: .82em; color: var(--encre-grise);
}
.avertissement-ecrasement strong { color: var(--rouge); }

/* Un bouton inactif doit se VOIR inactif : sinon on clique, rien ne se passe,
   et l'utilisateur croit a une panne au lieu de comprendre qu'il manque un fichier. */
.btn:disabled, .btn[disabled] {
  opacity: .45; cursor: not-allowed; filter: grayscale(.6);
}
.btn:disabled:hover, .btn[disabled]:hover { filter: grayscale(.6); }

/* ------------------------------------------------- modale a deux depots -- */
.modale-contenu.large { max-width: 860px; }

.deux-depots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem;
}
.depot-bloc {
  border: 1px solid var(--bord); border-radius: 6px; padding: .8rem .9rem;
  background: #fbfcfc; transition: border-color .2s, box-shadow .2s;
}
/* Ouvert depuis une carte : son bloc est mis en avant, l'autre reste utilisable. */
.depot-bloc.vise { border-color: var(--appBgColor); box-shadow: 0 0 0 2px rgba(65, 148, 136, .18); }
.depot-bloc h4 {
  margin: 0 0 .6rem; font-size: .92em; color: var(--encre);
  display: flex; align-items: center; gap: .45rem;
}
.depot-bloc h4 .vider {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--encre-grise); font-size: .95em; padding: .1rem .3rem;
}
.depot-bloc h4 .vider:hover { color: var(--appBgColor); }
.depot-bloc .depot { min-height: 150px; padding: 14px; }
.depot-bloc .depot p { margin: .7rem 0 .8rem; font-size: .86em; }
.depot-bloc .depot .fa-cloud-upload { font-size: 1.9em; display: block; margin-bottom: .45rem; opacity: .5; }
.depot-bloc .avertissement-ecrasement { margin-top: .7rem; text-align: left; font-size: .78em; }

/* Le repere de convention de signe, sous le titre d'un cycle.
   Pose le 22/09/2026 : la comparaison avec un dossier monte sous A2.1 (2022)
   fait croire a une erreur de calcul alors que seule la convention differe. */
.section-titre .convention {
  /* La marge negative se fusionne avec le 1.2rem de .citation : il reste .35rem
     au-dessus, et l'espace sous le bloc de titre est conserve. */
  margin: -.85rem 0 1.2rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--encre-douce);
}
.section-titre .convention .fa { margin-right: .3rem; opacity: .6; }