/* ---------------------------------------------------------------------------
   Feuille de style commune du portail Kaury Studio.
   ---------------------------------------------------------------------------
   Chargée sur TOUTES les pages par favicon_tag() (auth.php), AVANT le <style>
   propre à chaque page : une page peut donc toujours redéfinir ce qu'elle veut,
   ses règles arrivent après et l'emportent.

   Le but : ne plus recopier la palette et les composants de base dans 23
   fichiers. Changer une couleur de marque ici la change partout.
--------------------------------------------------------------------------- */

:root{
  /* Palette — l'identité Kaury Studio. */
  /* Trois NIVEAUX de surface, franchement séparés. Avant, le fond de page et
     celui des cartes ne différaient que de quelques points : les blocs se
     fondaient dans la page et plus rien ne se détachait. On garde le beige de
     la marque pour le fond, et on écarte les deux autres de part et d'autre.
       creux  ← surface2 … beige (page) … paper (cartes) →  relief             */
  --beige:#f1e8cb;          /* fond de page — le beige Kaury, inchangé */
  --paper:#fdfaf1;          /* cartes et barres : nettement plus clair */
  --surface2:#e7dcba;       /* aplats en creux (pastilles, champs enfoncés) */
  --post-beige:#e6d7a8;     /* pastilles « publication » du calendrier */
  --noir:#1c1a1a;           /* texte et bordures fortes */
  --orange:#f56e2e;         /* accent principal */
  --orange-t:#a83e0d;       /* accent lisible sur fond clair (liens) */
  --vert:#3d5c3d;           /* succès, rendez-vous */
  /* Le rouge d'erreur était à 9° de teinte de l'orange des liens : à l'œil,
     un message d'erreur et un lien se ressemblaient. Il est repoussé vers le
     rouge franc, pour qu'un danger ne puisse plus être lu comme un accent. */
  --due:#9b2226;            /* erreur, retard, danger */
  --alerte-fond:#fbeade;    /* fond des blocs à traiter (distinct de --paper) */
  --line:rgba(28,26,26,.15);       /* filets */
  --line-strong:rgba(28,26,26,.26);/* contours de champs */
  --ink-muted:#6b6456;             /* texte secondaire */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--beige);
  color:var(--noir);
  font-family:'Satoshi','Helvetica Neue',Arial,sans-serif;
}

.wrap{ max-width:900px; margin:0 auto; padding:1.4rem 1.5rem; }

/* --- Titres ----------------------------------------------------------------
   Les pages posaient chacune leurs tailles, souvent très proches les unes des
   autres : un h2 de section et un h3 de carte se distinguaient à peine, et rien
   ne hiérarchisait la lecture. Une échelle unique, franche, réglée ici. */
h1{ font-size:clamp(1.7rem,3vw,2.1rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 .6rem; }
h2{ font-size:1.45rem; line-height:1.15; letter-spacing:-.02em; margin:0 0 .9rem; }
h3{ font-size:1.02rem; line-height:1.25; margin:0 0 .6rem; }
h4{ font-size:.9rem; line-height:1.3; margin:0 0 .4rem; }
p{ line-height:1.55; }

/* --- Blocs ---------------------------------------------------------------- */
/* Le fond des cartes et celui de la page sont deux beiges très proches : sans
   un peu de relief, les blocs se fondaient dans le fond. L'ombre fait le
   travail que la bordure ne peut pas faire seule, sans l'alourdir. */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.35rem 1.4rem;
  margin-bottom:1.2rem;
  box-shadow:0 1px 2px rgba(28,26,26,.04), 0 12px 28px -22px rgba(28,26,26,.45);
}

/* --- Messages ------------------------------------------------------------- */
.flash{ border-radius:12px; padding:.7rem .9rem; font-weight:600; margin-bottom:1.2rem; }
.flash.ok{  background:#dbe4d0; color:var(--vert); border:1.5px solid var(--vert); }
.flash.err{ background:#f4ddd6; color:var(--due);  border:1.5px solid var(--due); }

/* --- Formulaires ---------------------------------------------------------- */
label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink-muted); margin:.7rem 0 .3rem; }

input, select, textarea{
  width:100%;
  padding:.6rem .8rem;
  border:1.5px solid var(--line-strong);
  border-radius:12px;
  background:var(--beige);
  color:var(--noir);
  font:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover{ border-color:var(--ink-muted); }
/* Un anneau doux plutôt qu'un contour orange plein de 3 px : celui-ci
   empâtait le champ et débordait sur ses voisins. Il reste tout aussi visible
   au clavier — c'est bien le rôle du focus — mais il encadre au lieu de cerner. */
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--noir);
  box-shadow:0 0 0 3px rgba(245,110,46,.35);
}
input[type=checkbox], input[type=radio]{ width:auto; accent-color:var(--orange); }

.hint{ font-size:.78rem; color:var(--ink-muted); margin-top:.3rem; }

/* --- Boutons -------------------------------------------------------------- */
.btn{
  display:inline-block;
  padding:.6rem 1.1rem;
  border-radius:999px;
  border:2px solid var(--noir);
  background:var(--orange);
  color:var(--noir);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  width:auto;
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{ background:var(--noir); color:var(--beige); }
/* Le clavier doit voir le bouton aussi bien que la souris. */
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(245,110,46,.45); }
.btn.ghost{ background:transparent; border-color:var(--line-strong); }
.btn.ghost:hover{ background:var(--noir); border-color:var(--noir); color:var(--beige); }
.btn.danger{ background:var(--due); color:#fff; border-color:var(--due); }
.btn.danger:hover{ background:var(--noir); border-color:var(--noir); color:#fff; }

/* --- Étiquettes ----------------------------------------------------------- */
.pill{
  display:inline-block;
  font-size:.72rem; font-weight:700;
  padding:.16rem .55rem;
  border-radius:999px;
  background:var(--surface2);
  white-space:nowrap;
}
.pill.ok{  background:#dbe4d0; color:var(--vert); }
.pill.bad{ background:#f4ddd6; color:var(--due); }

/* --- Utilitaires ---------------------------------------------------------- */
.sp{ flex:1; }
.empty{ color:var(--ink-muted); }
a{ color:var(--orange-t); }

/* Un tableau large ne doit jamais faire déborder la page : il défile dans son
   propre cadre (indispensable sur téléphone). */
.tblwrap{ overflow-x:auto; }

/* --- Barre de navigation --------------------------------------------------- */
/* Écrite ici et non en attributs `style=` : un style en ligne l'emporte sur
   toute media query, ce qui rendait la barre inadaptable au téléphone. */
/* Colonne de gauche, fixe. Huit entrées ne tiennent pas côte à côte sans se
   couper ou se replier ; empilées, elles respirent et le nom de chaque page se
   lit en entier. Le décalage du contenu est posé par topnav() elle-même, pour
   ne s'appliquer qu'aux pages qui ont réellement ce menu. */
.topnav{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  position:fixed; top:0; left:0; bottom:0; width:216px; z-index:20;
  padding:1.1rem .85rem;
  border-right:1px solid var(--line);
  background:var(--paper);
  overflow-y:auto;
}
.topnav-marque{ display:inline-flex; align-items:center; color:var(--noir); padding:0 .55rem; }
.topnav-marque svg{ display:block; height:26px; width:auto; }
/* Repère de rôle, pas décoration : un contour discret suffit. En orange plein,
   il attirait l'œil en permanence pour une information qui ne change jamais. */
.topnav-role{
  font-size:.63rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  padding:.18rem .5rem; border-radius:999px;
  border:1.5px solid var(--line-strong); color:var(--ink-muted); white-space:nowrap;
  align-self:flex-start; margin:.75rem .55rem 1.1rem;
}

/* UNE seule ligne, qui défile si besoin — à toutes les largeurs. Le repli sur
   deux lignes cassait la barre en deux dès qu'on rétrécissait un peu la fenêtre. */
.topnav-liens{ display:flex; flex-direction:column; gap:.12rem; }

/* Le compte tombe en bas de la colonne : c'est ce qu'on regarde le moins. */
.topnav-compte{
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  margin-top:auto; padding:1rem .55rem .2rem;
  border-top:1px solid var(--line);
}
.topnav-qui{ font-size:.82rem; color:var(--ink-muted); }
.topnav-sortie{ font-weight:600; text-decoration:none; font-size:.84rem; }

/* Gras ET délavé à la fois : les liens paraissaient épais et illisibles. Une
   graisse moyenne avec un vrai contraste se lit bien mieux, et le survol donne
   enfin un retour — il n'y en avait aucun. */
.nav-lien{
  display:flex; align-items:center;
  text-decoration:none; font-weight:600; font-size:.9rem;
  padding:.5rem .55rem; border-radius:10px;
  color:rgba(28,26,26,.7);
  transition:background .15s, color .15s;
}
/* Le compteur file à droite de la ligne, aligné d'une entrée à l'autre. */
.nav-lien .nav-badge{ margin-left:auto; }
.nav-lien:hover{ background:var(--surface2); color:var(--noir); }
.nav-lien.on{ background:var(--noir); color:var(--beige); font-weight:700; }
.nav-lien.on:hover{ background:var(--noir); color:var(--beige); }
.nav-badge{
  display:inline-block; min-width:16px; height:16px; line-height:16px;
  text-align:center; font-size:.66rem; font-weight:800;
  background:var(--due); color:#fff; border-radius:999px;
  padding:0 .25rem; margin-left:.35rem; vertical-align:top;
}

/* Sur téléphone, huit liens repliés occupaient quatre lignes — un quart de
   l'écran avant le moindre contenu. Ils tiennent maintenant sur UNE ligne qui
   défile du doigt, la marque et le compte passant au-dessus. */
/* Sur téléphone, une colonne fixe mangerait la moitié de l'écran : la barre
   redevient horizontale en haut, avec les liens qui défilent du doigt. */
@media (max-width: 900px){
  .topnav{
    position:sticky; inset:auto; top:0; width:auto; bottom:auto;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:.45rem;
    padding:.55rem .8rem;
    border-right:none; border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .topnav-marque{ padding:0; }
  .topnav-marque svg{ height:22px; }
  .topnav-role{ margin:0; }
  .topnav-liens{
    order:10; flex-basis:100%; flex-direction:row; gap:.1rem;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .topnav-liens::-webkit-scrollbar{ display:none; }
  .nav-lien{ padding:.3rem .6rem; font-size:.84rem; }
  .nav-lien .nav-badge{ margin-left:.35rem; }
  .topnav-compte{
    flex-direction:row; align-items:center; gap:.6rem;
    margin:0 0 0 auto; padding:0; border-top:none;
  }
  .topnav-qui{ display:none; }
}

/* --- Bloc de création repliable -------------------------------------------
   Créer un client ou une facture est rare ; consulter la liste est quotidien.
   Le formulaire tient donc en une ligne tant qu'on ne s'en sert pas, et la
   liste commence immédiatement — plus besoin de faire défiler à chaque visite. */
.creer{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:1.2rem;
}
.creer > summary{
  list-style:none; cursor:pointer;
  padding:.85rem 1.4rem;
  font-weight:700; font-size:1rem;
  display:flex; align-items:center; gap:.5rem;
  border-radius:16px;
}
.creer > summary::-webkit-details-marker{ display:none; }
/* Chevron qui pivote : le seul repère indiquant que le bloc s'ouvre. */
.creer > summary::after{
  content:'⌄'; margin-left:auto; font-size:1.1rem; line-height:1;
  color:var(--ink-muted); transition:transform .2s;
}
.creer[open] > summary::after{ transform:rotate(180deg); }
.creer > summary:hover{ background:var(--surface2); }
.creer[open] > summary{ border-bottom:1px solid var(--line); border-radius:16px 16px 0 0; }
.creer > form{ padding:1.1rem 1.4rem 1.4rem; }

/* Champ de recherche du menu. Discret au repos, il ne prend son importance
   qu'au moment où on clique dedans. */
.topnav-rech{ margin:0 0 .8rem; }
.topnav-rech input{
  padding:.42rem .65rem; font-size:.85rem; border-radius:9px;
  background:var(--beige); border-color:var(--line);
}
@media (max-width: 900px){
  /* Sur téléphone la barre est déjà chargée : le champ passe sous les liens,
     sur toute la largeur, plutôt que de rogner la place de la navigation. */
  .topnav-rech{ order:20; flex-basis:100%; margin:.15rem 0 0; }
}