/* =====================================================================
   ARCHIPLUS - Feuille de style de l'application
   ---------------------------------------------------------------------
   Un seul fichier, sans dependance externe. Rien a telecharger, rien a
   compiler : tu modifies, tu televerses, c'est en ligne.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS DE DESIGN
   --------------------------------------------------------------------- */
:root {
  /* ---- PALETTE OFFICIELLE ARCHIPLUS ----------------------------------
     Repartition visee : 70% fonds/surfaces, 20% textes, 7% vert, 3% or.
     -------------------------------------------------------------------- */

  /* Fonds et texte */
  --fond:         #EEEEEE;   /* fond principal */
  --surface:      #ffffff;   /* cartes et surfaces */
  --surface-2:    #E4E7EA;   /* surfaces secondaires */
  --surface-3:    #D9DCE0;   /* survol */
  --encre:        #222831;   /* texte principal et titres */
  --encre-douce:  #353B45;
  --gris:         #5A6069;   /* texte secondaire et icones */
  --gris-clair:   #8A9099;
  --trait:        #D9DCE0;   /* bordures et separateurs */
  --trait-fort:   #C9CDD2;

  /* Couleur principale - vert profond (CTA, elements actifs) */
  --prim:         #007A80;
  --prim-clair:   #00C2CB;
  --prim-pale:    #DFF3F4;
  --nuit:         #222831;   /* vert-noir des sections sombres */
  --nuit-2:       #393E46;

  /* Accent - or (elements importants, tres dose) */
  --or:           #00ADB5;
  --or-clair:     #00C2CB;
  --or-pale:      #E4F6F7;

  /* Secondaire - ardoise (infos, liens, graphiques) */
  --ardoise:      #5A6673;
  --ardoise-pale: #E4E7EA;

  /* Couleurs de sens */
  --vert:         #007A80;
  --vert-pale:    #DFF3F4;
  --ambre:        #a17520;
  --ambre-pale:   #E4F6F7;
  --rouge:        #a8372b;
  --rouge-pale:   #f7e6e3;

  /* Typographie */
  --police:       "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --mono:         "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", ui-monospace, monospace;

  /* Rythme */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;

  --rayon:    3px;
  --rayon-lg: 5px;
  --ombre:    0 1px 2px rgba(34, 40, 49, .06), 0 2px 8px rgba(34, 40, 49, .04);
  --ombre-lg: 0 4px 24px rgba(34, 40, 49, .12);

  --barre: 15rem;   /* largeur de la navigation laterale */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:        #101312;
    --surface:     #181c1b;
    --surface-2:   #1f2523;
    --surface-3:   #2a312e;
    --encre:       #E4E7EA;
    --encre-douce: #c2c7c4;
    --gris:        #8f9694;
    --gris-clair:  #6d7573;
    --trait:       #2b3230;
    --trait-fort:  #3d4643;
    --prim:        #3FD0D8;
    --prim-clair:  #7cc4a9;
    --prim-pale:   #2A3038;
    --nuit:        #0c1613;
    --nuit-2:      #14231e;
    --or:          #00C2CB;
    --or-clair:    #5FD8DF;
    --or-pale:     #123338;
    --ardoise:     #7fa3b3;
    --ardoise-pale:#182228;
    --vert:        #3FD0D8;
    --vert-pale:   #2A3038;
    --ambre:       #00C2CB;
    --ambre-pale:  #123338;
    --rouge:       #e38273;
    --rouge-pale:  #2d1c19;
    --ombre:       0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
    --ombre-lg:    0 4px 24px rgba(0,0,0,.5);
  }
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 650; margin: 0; line-height: 1.25; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }

p { margin: 0 0 var(--e4); }

a { color: var(--prim); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--prim);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--prim); color: #fff; }

.mono { font-family: var(--mono); font-size: .88em; }
.nb   { font-variant-numeric: tabular-nums; }
.muet { color: var(--gris); }
.petit{ font-size: .85rem; }
.gras { font-weight: 650; }
.droite { text-align: right; }
.centre { text-align: center; }
.rien { display: none !important; }

/* ---------------------------------------------------------------------
   3. STRUCTURE DE L'APPLICATION
   --------------------------------------------------------------------- */
.appli { display: flex; min-height: 100vh; }

/* --- Navigation laterale --- */
.barre {
  width: var(--barre);
  flex: 0 0 var(--barre);
  background: var(--nuit);
  color: #DDE0E3;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.barre-marque {
  padding: var(--e5) var(--e4) var(--e4);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.barre-marque a { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.barre-marque a:hover { text-decoration: none; }
.barre-marque .boite {
  display: block;
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  margin-top: var(--e1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barre-nav { flex: 1; padding: var(--e3) 0; }

.barre-groupe {
  padding: var(--e4) var(--e4) var(--e2);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255,255,255,.35);
  font-weight: 600;
}

.barre-lien {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: .55rem var(--e4);
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  border-left: 2px solid transparent;
}

.barre-lien:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }

.barre-lien.actif {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-left-color: var(--prim);
  font-weight: 600;
}

.barre-lien .puce {
  margin-left: auto;
  background: var(--rouge);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .38rem;
  border-radius: 20px;
  min-width: 1.15rem;
  text-align: center;
}

.barre-pied {
  padding: var(--e4);
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .78rem;
}

.barre-pied .nom { color: #fff; font-weight: 600; }
.barre-pied .role { color: rgba(255,255,255,.5); font-size: .72rem; }
.barre-pied form { margin-top: var(--e2); }
.barre-pied button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.6); font: inherit; font-size: .78rem;
}
.barre-pied button:hover { color: #fff; text-decoration: underline; }

/* --- Zone principale --- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  padding: var(--e4) var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}

.entete h1 { flex: 1; min-width: 12rem; }
.entete .actions { display: flex; gap: var(--e2); flex-wrap: wrap; }

.contenu { padding: var(--e5); flex: 1; }

.fil { font-size: .82rem; color: var(--gris); margin-bottom: var(--e2); }
.fil a { color: var(--gris); }
.fil span { margin: 0 var(--e1); }

/* --- Bouton d'ouverture du menu sur mobile --- */
.menu-bouton {
  display: none;
  background: none; border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .35rem .6rem; cursor: pointer; color: var(--encre); font-size: 1.1rem;
}

@media (max-width: 900px) {
  .barre {
    position: fixed; z-index: 60; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--ombre-lg);
  }
  .barre.ouverte { transform: translateX(0); }
  .menu-bouton { display: block; }
  .contenu { padding: var(--e4); }
  .entete { padding: var(--e3) var(--e4); }
  .voile {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55;
  }
}

/* ---------------------------------------------------------------------
   4. CARTES ET PANNEAUX
   --------------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
}

.carte-tete {
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

.carte-tete h2 { flex: 1; min-width: 8rem; font-size: .95rem; }
.carte-corps { padding: var(--e5); }
.carte-pied {
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
}

.grille { display: grid; gap: var(--e4); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.pile { display: flex; flex-direction: column; gap: var(--e4); }
.rang { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.rang-fin { margin-left: auto; }

/* --- Tuile de chiffre --- */
.tuile {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  padding: var(--e4);
  box-shadow: var(--ombre);
  display: block;
}
.tuile:hover { text-decoration: none; border-color: var(--trait-fort); }

.tuile .etiquette {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  font-weight: 600;
  display: block;
  margin-bottom: var(--e2);
}
.tuile .valeur {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
}
.tuile .detail { font-size: .8rem; color: var(--gris); margin-top: var(--e1); display: block; }
.tuile.alerte { border-left: 3px solid var(--rouge); }
.tuile.bien   { border-left: 3px solid var(--vert); }
.tuile.attente{ border-left: 3px solid var(--ambre); }

/* ---------------------------------------------------------------------
   5. TABLEAUX
   --------------------------------------------------------------------- */
.tableau-boite { overflow-x: auto; }

table.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }

table.tableau th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  font-weight: 600;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--trait-fort);
  white-space: nowrap;
  background: var(--surface-2);
}

table.tableau td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}

table.tableau tbody tr:hover { background: var(--surface-2); }
table.tableau tbody tr:last-child td { border-bottom: 0; }
table.tableau td.nb, table.tableau th.nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tableau td.actions { text-align: right; white-space: nowrap; }
table.tableau a.principal-lien { font-weight: 600; color: var(--encre); }
table.tableau a.principal-lien:hover { color: var(--prim); }

.vide {
  padding: var(--e7) var(--e5);
  text-align: center;
  color: var(--gris);
}
.vide .titre { font-size: 1rem; font-weight: 650; color: var(--encre-douce); margin-bottom: var(--e2); }
.vide p { max-width: 26rem; margin: 0 auto var(--e4); font-size: .9rem; }

/* ---------------------------------------------------------------------
   6. FORMULAIRES
   --------------------------------------------------------------------- */
.champ { margin-bottom: var(--e4); }

.champ > label,
.etiquette-champ {
  display: block;
  font-size: .8rem;
  font-weight: 650;
  color: var(--encre-douce);
  margin-bottom: var(--e1);
}

.champ .obligatoire { color: var(--rouge); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=search], input[type=url],
select, textarea {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  transition: border-color .12s, box-shadow .12s;
}

input:hover, select:hover, textarea:hover { border-color: var(--gris-clair); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--prim);
  box-shadow: 0 0 0 3px var(--prim-pale);
}

input::placeholder, textarea::placeholder { color: var(--gris-clair); }

textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.en-erreur, input.en-erreur, select.en-erreur, textarea.en-erreur {
  border-color: var(--rouge);
}

.champ-erreur {
  display: block;
  color: var(--rouge);
  font-size: .78rem;
  margin-top: var(--e1);
}

.aide { font-size: .78rem; color: var(--gris); margin-top: var(--e1); }

.champ-inline { display: flex; align-items: center; gap: var(--e2); }
.champ-inline input[type=checkbox], .champ-inline input[type=radio] { width: auto; margin: 0; }
.champ-inline label { margin: 0; font-weight: 400; font-size: .88rem; }

.groupe-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 var(--e4); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--e5); }
legend {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); font-weight: 700; padding: 0 0 var(--e3);
  border-bottom: 1px solid var(--trait); width: 100%; margin-bottom: var(--e4);
}

.suffixe { position: relative; }
.suffixe input { padding-right: 3rem; }
.suffixe .unite {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .82rem; color: var(--gris); pointer-events: none;
}

/* ---------------------------------------------------------------------
   7. BOUTONS
   --------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: .48rem .9rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  background: var(--prim);
  color: #fff;
  white-space: nowrap;
  transition: filter .12s, background .12s;
}

.bouton:hover { filter: brightness(1.12); text-decoration: none; color: #fff; }
.bouton:active { filter: brightness(.95); }
.bouton[disabled], .bouton.inactif { opacity: .5; cursor: not-allowed; filter: none; }

.bouton-2 {
  background: var(--surface);
  color: var(--encre);
  border-color: var(--trait-fort);
}
.bouton-2:hover { background: var(--surface-2); color: var(--encre); filter: none; border-color: var(--gris-clair); }

.bouton-fantome { background: transparent; color: var(--gris); border-color: transparent; }
.bouton-fantome:hover { background: var(--surface-3); color: var(--encre); filter: none; }

.bouton-danger { background: var(--rouge); }
.bouton-succes { background: var(--vert); }

.bouton-petit { padding: .28rem .6rem; font-size: .8rem; }
.bouton-grand { padding: .65rem 1.4rem; font-size: .95rem; }
.bouton-bloc  { width: 100%; }

.lien-danger { color: var(--rouge); }

/* ---------------------------------------------------------------------
   8. ETIQUETTES D'ETAT
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: .13rem .5rem;
  font-size: .72rem;
  font-weight: 650;
  border-radius: 20px;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--encre-douce);
}

.badge-bleu  { background: var(--prim-pale);  color: var(--prim); }
.badge-vert  { background: var(--vert-pale);  color: var(--vert); }
.badge-ambre { background: var(--ambre-pale); color: var(--ambre); }
.badge-rouge { background: var(--rouge-pale); color: var(--rouge); }
.badge-gris  { background: var(--surface-3);  color: var(--gris); }

.badge::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 5px;
}
.badge.sans-point::before { display: none; }

/* ---------------------------------------------------------------------
   9. MESSAGES
   --------------------------------------------------------------------- */
.messages { margin-bottom: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }

.message {
  padding: .7rem var(--e4);
  border-radius: var(--rayon);
  border-left: 3px solid;
  font-size: .9rem;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.message-succes { border-color: var(--vert);  background: var(--vert-pale);  color: var(--vert); }
.message-erreur { border-color: var(--rouge); background: var(--rouge-pale); color: var(--rouge); }
.message-alerte { border-color: var(--ambre); background: var(--ambre-pale); color: var(--ambre); }
.message-info   { border-color: var(--prim);  background: var(--prim-pale);  color: var(--prim); }

/* Bandeau de fin d'essai */
.bandeau {
  background: var(--ambre-pale);
  color: var(--ambre);
  padding: .55rem var(--e5);
  font-size: .85rem;
  text-align: center;
  border-bottom: 1px solid var(--trait);
}
.bandeau a { color: inherit; text-decoration: underline; font-weight: 650; }
.bandeau.urgent { background: var(--rouge-pale); color: var(--rouge); }

/* ---------------------------------------------------------------------
   10. BARRE DE FILTRES
   --------------------------------------------------------------------- */
.filtres {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--e4);
}

.filtres input[type=search],
.filtres input[type=text] { max-width: 18rem; }
.filtres select { width: auto; min-width: 9rem; }

.onglets {
  display: flex;
  gap: var(--e1);
  border-bottom: 1px solid var(--trait);
  margin-bottom: var(--e5);
  overflow-x: auto;
}

.onglet {
  padding: .5rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gris);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.onglet:hover { color: var(--encre); text-decoration: none; }
.onglet.actif { color: var(--prim); border-bottom-color: var(--prim); }

/* ---------------------------------------------------------------------
   11. PAGINATION
   --------------------------------------------------------------------- */
.pagination { display: flex; gap: var(--e1); align-items: center; justify-content: center; margin-top: var(--e5); }

.pagination a, .pagination span {
  padding: .3rem .65rem;
  font-size: .85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  color: var(--encre-douce);
  background: var(--surface);
}
.pagination a:hover { border-color: var(--prim); color: var(--prim); text-decoration: none; }
.pagination .courante { background: var(--prim); color: #fff; border-color: var(--prim); font-weight: 650; }
.pagination .inactive { opacity: .4; }

/* ---------------------------------------------------------------------
   12. EDITEUR DE LIGNES (devis / factures)
   --------------------------------------------------------------------- */
.lignes { width: 100%; border-collapse: collapse; font-size: .88rem; }

.lignes th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gris); font-weight: 600; text-align: left;
  padding: var(--e2) var(--e3); border-bottom: 1px solid var(--trait-fort);
}

.lignes td { padding: var(--e1) var(--e3); border-bottom: 1px solid var(--trait); vertical-align: top; }
.lignes input, .lignes select { border-color: transparent; background: transparent; padding: .35rem .4rem; }
.lignes input:hover, .lignes select:hover { border-color: var(--trait); background: var(--surface); }
.lignes input:focus, .lignes select:focus { background: var(--surface); }
.lignes .col-qte, .lignes .col-pu, .lignes .col-total { width: 7.5rem; }
.lignes .col-unite { width: 6rem; }
.lignes .col-action { width: 2.5rem; }
.lignes input.nb { text-align: right; }
.lignes tr.ligne-titre { background: var(--surface-2); }
.lignes tr.ligne-titre input { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.lignes .poignee { cursor: grab; color: var(--gris-clair); user-select: none; }
.lignes .total-ligne { font-variant-numeric: tabular-nums; text-align: right; padding-top: .7rem; font-weight: 600; }
.lignes .supprimer-ligne {
  background: none; border: 0; color: var(--gris-clair); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .3rem;
}
.lignes .supprimer-ligne:hover { color: var(--rouge); }

.recapitulatif { margin-left: auto; width: min(22rem, 100%); }
.recapitulatif dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem var(--e4); margin: 0; }
.recapitulatif dt { color: var(--gris); font-size: .88rem; }
.recapitulatif dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; }
.recapitulatif .total {
  border-top: 2px solid var(--encre); margin-top: var(--e2); padding-top: var(--e2);
  font-size: 1.05rem; font-weight: 700;
}
.recapitulatif .total dt, .recapitulatif .total dd { font-size: 1.05rem; font-weight: 700; color: var(--encre); }

/* --- Suggestions du catalogue --- */
.suggestions {
  position: absolute; z-index: 40;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-lg);
  max-height: 16rem; overflow-y: auto;
  min-width: 20rem;
}
.suggestion { padding: .45rem var(--e3); cursor: pointer; font-size: .86rem; display: flex; gap: var(--e3); }
.suggestion:hover, .suggestion.survol { background: var(--prim-pale); }
.suggestion .lib { flex: 1; }
.suggestion .prix { color: var(--gris); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   13. PIPELINE (prospects en colonnes)
   --------------------------------------------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(13rem, 1fr)); gap: var(--e3); overflow-x: auto; }

.colonne { background: var(--surface-2); border-radius: var(--rayon-lg); padding: var(--e3); min-height: 12rem; }
.colonne-tete { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.colonne-tete .titre { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.colonne-tete .compte { margin-left: auto; font-size: .75rem; color: var(--gris); background: var(--surface-3); padding: 0 .4rem; border-radius: 10px; }

.fiche {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e3); margin-bottom: var(--e2); display: block; box-shadow: var(--ombre);
}
.fiche:hover { border-color: var(--prim); text-decoration: none; }
.fiche .nom { font-weight: 650; color: var(--encre); font-size: .88rem; }
.fiche .meta { font-size: .78rem; color: var(--gris); margin-top: var(--e1); }
.fiche .montant { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--prim); font-weight: 650; margin-top: var(--e1); }

@media (max-width: 900px) {
  .pipeline { grid-template-columns: repeat(5, 15rem); }
}

/* ---------------------------------------------------------------------
   14. FENETRES MODALES
   --------------------------------------------------------------------- */
dialog {
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-lg);
  padding: 0;
  background: var(--surface);
  color: var(--encre);
  box-shadow: var(--ombre-lg);
  max-width: min(32rem, 92vw);
  width: 100%;
}
dialog::backdrop { background: rgba(23, 28, 36, .55); }
dialog .carte-tete h2 { font-size: 1rem; }
dialog .carte-corps { padding: var(--e5); }
dialog .carte-pied { display: flex; gap: var(--e2); justify-content: flex-end; }

/* ---------------------------------------------------------------------
   15. PAGES PUBLIQUES
   --------------------------------------------------------------------- */
.public { min-height: 100vh; display: flex; flex-direction: column; }

.public-entete {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  padding: var(--e4) var(--e5);
  display: flex; align-items: center; gap: var(--e5);
  position: sticky; top: 0; z-index: 30;
}
.public-entete .marque { font-size: 1.2rem; font-weight: 700; color: var(--nuit); letter-spacing: .03em; }
.public-entete nav { margin-left: auto; display: flex; gap: var(--e4); align-items: center; }
.public-entete nav a { font-size: .9rem; color: var(--encre-douce); font-weight: 500; }
.public-entete nav a:hover { color: var(--prim); text-decoration: none; }

.public-corps { flex: 1; }

.public-pied {
  background: var(--nuit);
  color: rgba(255,255,255,.65);
  padding: var(--e6) var(--e5);
  font-size: .85rem;
}
.public-pied a { color: rgba(255,255,255,.85); }
.public-pied .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e5); max-width: 64rem; margin: 0 auto; }
.public-pied h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--e3); }
.public-pied ul { list-style: none; padding: 0; margin: 0; }
.public-pied li { margin-bottom: var(--e2); }
.public-pied .bas {
  max-width: 64rem; margin: var(--e6) auto 0; padding-top: var(--e4);
  border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem;
  display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
}

/* --- Formulaire centre (connexion, inscription) --- */
.centre-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e5) var(--e4);
  background: var(--fond);
}
.boite-auth { width: 100%; max-width: 25rem; }
.boite-auth .marque {
  text-align: center; font-size: 1.5rem; font-weight: 700;
  color: var(--nuit); margin-bottom: var(--e2); letter-spacing: .04em;
  display: block;
}
.boite-auth .accroche { text-align: center; color: var(--gris); font-size: .88rem; margin-bottom: var(--e5); }
.boite-auth .carte-corps { padding: var(--e5); }
.boite-auth .bas { text-align: center; margin-top: var(--e4); font-size: .86rem; color: var(--gris); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .public-entete .marque,
  :root:not([data-theme="light"]) .boite-auth .marque { color: var(--prim); }
}

/* ---------------------------------------------------------------------
   15 bis. COMPOSANTS DU PILOTAGE DE PROJET
   --------------------------------------------------------------------- */

/* --- La frise des phases -------------------------------------------
   Chaque etape est un vrai bouton : cliquer fait avancer le projet.  */
.frise { display: flex; gap: 0; overflow-x: auto; padding-bottom: .2rem; }
.frise-etape { flex: 1 0 auto; margin: 0; }

.frise-bouton {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  padding: .5rem .7rem .3rem;
  font: inherit; text-align: center; color: var(--gris);
  position: relative;
  transition: color .18s;
}
.frise-bouton:hover { color: var(--encre); }

.frise-bouton .point {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--trait-fort);
  margin: 0 auto .45rem;
  position: relative; z-index: 1;
  transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
/* le trait qui relie les etapes */
.frise-etape:not(:last-child) .frise-bouton::after {
  content: ""; position: absolute; top: calc(.5rem + 4px);
  left: 50%; right: -50%; height: 1px; background: var(--trait);
}
.frise-bouton.passee .point,
.frise-bouton.courante .point { background: var(--prim); }
.frise-bouton.courante .point { transform: scale(1.5); box-shadow: 0 0 0 3px var(--prim-pale); }
.frise-bouton.courante { color: var(--encre); font-weight: 650; }

.frise-bouton .nom {
  display: block; font-size: .7rem; letter-spacing: .02em; white-space: nowrap;
}

/* --- Jauge d'avancement --------------------------------------------- */
.jauge { height: 4px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--prim); border-radius: 3px;
           transition: width .4s cubic-bezier(.16,1,.3,1); }
.jauge.mince { height: 3px; }

/* --- Coche de tache -------------------------------------------------- */
.coche {
  width: 18px; height: 18px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--trait-fort); border-radius: 3px;
  background: var(--surface); display: block;
  transition: border-color .15s, background .15s;
}
.coche:hover { border-color: var(--prim); }
.coche.faite { background: var(--prim); border-color: var(--prim); position: relative; }
.coche.faite::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Pastille d'initiales -------------------------------------------- */
.pastille {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--prim-pale); color: var(--prim);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}

/* --- Pastille de date ------------------------------------------------ */
.jour-pastille {
  display: grid; place-items: center; line-height: 1.1;
  width: 2.7rem; padding: .3rem 0;
  border: 1px solid var(--trait); border-left-width: 3px; border-radius: 3px;
  background: var(--surface);
}
.jour-pastille b { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jour-pastille i {
  font-style: normal; font-size: .54rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris);
}

/* --- Extension de fichier -------------------------------------------- */
.ext {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--trait);
  font-family: var(--mono); font-size: .56rem; font-weight: 700;
  text-transform: uppercase; color: var(--gris);
}

/* --- Relevé d'argent -------------------------------------------------- */
.releve-argent { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; margin: 0; }
.releve-argent dt { color: var(--gris); font-size: .86rem; padding: .38rem 0; }
.releve-argent dd {
  margin: 0; padding: .38rem 0; text-align: right;
  font-variant-numeric: tabular-nums; font-size: .92rem;
}
.releve-argent dt.fort, .releve-argent dd.fort {
  border-top: 1px solid var(--trait); margin-top: .3rem; padding-top: .6rem;
  color: var(--encre); font-weight: 650;
}
.releve-argent dd.fort { font-size: 1.02rem; color: var(--prim); }

/* --- Zone de dépôt de fichier ---------------------------------------- */
.depot input[type=file] {
  width: 100%; padding: .5rem; font: inherit; font-size: .85rem;
  background: var(--surface-2); border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon); cursor: pointer;
}
.depot input[type=file]:hover { border-color: var(--prim); }

/* --- Colonnes de phases (vue pipeline des projets) -------------------- */
.colonnes-phases {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr);
  gap: var(--e3); overflow-x: auto; padding-bottom: var(--e3);
}
.colonne-phase { background: var(--surface-2); border-radius: var(--rayon-lg); padding: var(--e3); }
.colonne-phase-tete {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gris);
}
.colonne-phase-tete .compte {
  margin-left: auto; background: var(--surface-3); color: var(--gris);
  padding: 0 .4rem; border-radius: 10px; font-size: .7rem;
}
.fiche-projet {
  display: block; background: var(--surface); border: 1px solid var(--trait);
  border-left: 3px solid var(--prim); border-radius: var(--rayon);
  padding: var(--e3); margin-bottom: var(--e2); box-shadow: var(--ombre);
}
.fiche-projet:hover { border-color: var(--prim); text-decoration: none; }
.fiche-projet .nom { font-weight: 650; color: var(--encre); font-size: .88rem; display: block; }
.fiche-projet .meta { font-size: .74rem; color: var(--gris); margin-top: .2rem; }

/* --- Grille du calendrier -------------------------------------------- */
.calendrier { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier th {
  padding: .5rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); font-weight: 600; text-align: center;
  border-bottom: 1px solid var(--trait-fort);
}
.calendrier td {
  border: 1px solid var(--trait); vertical-align: top;
  height: 6.5rem; padding: .35rem; background: var(--surface);
}
.calendrier td.hors { background: var(--surface-2); }
.calendrier td.aujourd { background: var(--prim-pale); }
.calendrier .num-jour {
  font-size: .74rem; font-weight: 600; color: var(--gris);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: .25rem;
}
.calendrier td.aujourd .num-jour { color: var(--prim); }
.calendrier .evt {
  display: block; font-size: .68rem; line-height: 1.3;
  padding: .16rem .3rem; margin-bottom: .18rem; border-radius: 2px;
  border-left: 2px solid var(--prim); background: var(--surface-2);
  color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendrier .evt:hover { text-decoration: none; background: var(--surface-3); }

@media (max-width: 720px) {
  .calendrier td { height: 4rem; padding: .2rem; }
  .calendrier .evt { font-size: 0; padding: .18rem; height: .5rem; }
}

/* ---------------------------------------------------------------------
   16. IMPRESSION DES DOCUMENTS
   --------------------------------------------------------------------- */
@media print {
  .barre, .entete, .messages, .no-print, .public-entete, .public-pied { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .appli { display: block; }
  .contenu { padding: 0; }
  .carte { border: 0; box-shadow: none; }
  a { color: #000; text-decoration: none; }
  .document { padding: 0; margin: 0; max-width: none; }
  @page { margin: 14mm 12mm; }
}