/* Des Terres d'Harmony - Direction */

:root {
  --fond: #f4f2ec;
  --fond-carte: #ffffff;
  --fond-doux: #efece3;
  --texte: #2b2924;
  --texte-doux: #6d6759;
  --bordure: #e2ddd0;
  --accent: #5c7a5c;
  --accent-fonce: #43603f;
  --accent-clair: #eaf0e8;
  /* Version VIVE de la couleur principale, pour les barres d'onglets.
     Recalculee a chaque chargement par appliquerTheme (core.js) ; ces
     valeurs ne servent que le temps que le theme arrive. */
  --accent-vif: #6f9a6c;
  --accent-vif-doux: #e9f1e7;
  --accent-vif-texte: #ffffff;
  --urgent: #b23b2e;
  --urgent-fond: #f7e5e2;
  --important: #b7791f;
  --important-fond: #f8ecd8;
  --info: #3a6b8a;
  --ok: #3f7d4f;
  --ok-fond: #e2f2e6;
  --ok-texte: #2f6b3f;
  --ombre: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --rayon: 12px;
  /* Police de l'interface. Modifiable dans Parametres > Code couleur ; les
     piles proposees n'utilisent que des polices deja presentes sur le Mac,
     l'application devant fonctionner sans connexion. */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --barre-l: 240px;

  /* Code couleur des trois univers d'activite.
     Une couleur par combinaison structure + activite, pour distinguer d'un
     coup d'oeil l'elevage d'Orange, l'elevage de Pierrelatte et la pension. */
  --u-elevage-ei: #2f6f9e;        /* elevage EI Orange       : bleu */
  --u-elevage-ei-fond: #e3eef6;
  --u-elevage-sarl: #7a5296;      /* elevage SARL Pierrelatte : violet */
  --u-elevage-sarl-fond: #efe7f4;
  --u-pension: #b06a1f;           /* pension Pierrelatte      : ambre */
  --u-pension-fond: #f8ebdb;
  --u-autre: #6d6759;
  --u-autre-fond: #efece3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1a17;
    --fond-carte: #252420;
    --fond-doux: #2e2c26;
    --texte: #ece9e1;
    --texte-doux: #a49d8d;
    --bordure: #3a382f;
    --accent: #8bab86;
    --accent-fonce: #a6c4a1;
    --accent-clair: #2c342a;
    --accent-vif: #7fb178;
    --accent-vif-doux: #2b332a;
    --accent-vif-texte: #1a1a17;
    --urgent: #e2705f;
    --urgent-fond: #3a2723;
    --important: #d9a441;
    --important-fond: #38301f;
    --info: #7fb0cc;
    --ok: #7fc08c;
    --ok-fond: #1e3527;
    --ok-texte: #7fc08c;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);

    --u-elevage-ei: #7fb6dd;
    --u-elevage-ei-fond: #1f3242;
    --u-elevage-sarl: #bfa0d6;
    --u-elevage-sarl-fond: #322841;
    --u-pension: #e0a25c;
    --u-pension-fond: #3d2f1c;
    --u-autre: #a49d8d;
    --u-autre-fond: #2e2c26;
  }
}

/* ============================================================================
   L'AMBIANCE PASTEL — le beige, et toute une declinaison douce.

   Stephanie, le 04/09/2026 : « fais-moi un site dans les tons pastel, beige
   pastel et toute une declinaison de couleur pastel. Ces couleurs que tu m'as
   mises la, c'est beaucoup trop agressif pour mes yeux. »

   Elle travaille sur cet ecran du matin au soir. Le fond sombre venait de son
   Mac, pas d'un choix : l'application suivait `prefers-color-scheme`, et sur ce
   fond noir les pastilles saturees brillaient. Le mode « pastel » ne suit plus
   le systeme, il s'impose — c'est tout l'objet du reglage.

   Le principe : un papier beige plutot qu'un blanc dur, un texte brun-gris
   plutot qu'un noir, et des couleurs de meme intensite, aucune ne criant plus
   fort qu'une autre. Le rouge previent sans alarmer, le vert approuve sans
   fluorescer.

   ⚠️ `:root[data-theme]` l'emporte sur le `:root` du media sombre — meme ordre
   de specificite superieur, quel que soit le reglage du Mac.
   ========================================================================== */
:root[data-theme="pastel"] {
  /* ⚠️ PREMIERE VERSION : TROP TERNE.
     Stephanie, le 04/09/2026 : « je trouve les couleurs pastel, elles ne sont
     pas super pastel, elles sont ternes. On sent l'automne, je n'aime pas trop.
     Il faut quelque chose de plus frais : des tons de rose, de beige tres
     clair, tres cosy, un blanc casse, un vert pastel, un rose poudre. »
     J'avais construit des teintes desaturees et moyennement claires — du lin,
     de la taupe, du miel : c'etait sourd. Une couleur pastel est CLAIRE et
     garde sa teinte ; c'est la clarte qui la rend douce, pas la grisaille. */
  --fond: #FCF8F6;              /* blanc casse, a peine rose */
  --fond-carte: #FFFFFF;
  --fond-doux: #F8F0ED;
  --texte: #4C4442;             /* brun tres doux, jamais de noir */
  --texte-doux: #978B87;
  --bordure: #F1E5E0;
  --accent: #9FCBB2;            /* vert pastel, frais */
  --accent-fonce: #6FAE8F;
  --accent-clair: #EAF6EF;
  --urgent: #E59292;            /* rose corail : il previent, il n'alarme pas */
  --urgent-fond: #FDEFEF;
  --important: #E9C08A;
  --important-fond: #FEF6EA;
  --info: #9CC2E0;
  --ok: #95CDA9;
  --ok-fond: #ECF8F0;
  --ok-texte: #5FA37C;
  --ombre: 0 1px 2px rgba(150,120,110,.05), 0 4px 16px rgba(150,120,110,.07);

  --u-elevage-ei: #9CC2E0;      /* elevage Orange   — bleu ciel */
  --u-elevage-ei-fond: #EEF5FB;
  --u-elevage-sarl: #C3B0DF;    /* elevage SARL     — lilas */
  --u-elevage-sarl-fond: #F4F0FB;
  --u-pension: #EBBB8D;         /* pension          — abricot */
  --u-pension-fond: #FDF3E9;
  --u-autre: #BCAFAA;
  --u-autre-fond: #F8F0ED;
}

/* LA BARRE DE GAUCHE N'EST PLUS UNE BARRE NOIRE.
   « Ta bande a gauche, la ou il y a Des Terres d'Harmony Direction, elle est
   tres tres foncee et franchement, je deteste. »
   Elle etait dessinee pour du texte blanc sur fond sombre — d'ou le « cristal »
   et les ombres portees. En pastel elle devient du papier rose poudre, avec le
   meme texte brun que le reste, et les teintes de chaque espace deviennent des
   lavis au lieu de vitres. */
:root[data-theme="pastel"] .barre-laterale {
  background: #FBF2F0;
  color: var(--texte);
  border-right: 1px solid var(--bordure);
}
:root[data-theme="pastel"] .marque-sous { opacity: .6; }
/* Les blocs du menu sont desormais peints pareil pour toutes les ambiances —
   opaques, de leur propre couleur : voir la regle `#navigation .nav-bloc`. Le
   pastel n'a plus a les redefinir. */
:root[data-theme="pastel"] .barre-pied { opacity: .75; }

/* LA BARRE DE GAUCHE EST DE LA COULEUR DES BOUTONS.
   Stephanie, le 12/09/2026 : « la couleur de la barre de gauche doit être sur
   un ton naturel. J'ai mis un rose et il est beaucoup plus foncé que les
   boutons » — puis, une fois la barre eclaircie : « les onglets au niveau
   couleur ne doivent pas être touchés ; par contre le fond, il faut qu'il soit
   de la couleur des boutons. »
   Donc : le FOND prend exactement `--accent`, la couleur des boutons, et rien
   d'autre ne bouge. Les blocs du menu gardent leurs teintes et leur cristal —
   ils sont peints en translucide, ils tiennent sur n'importe quel fond. Seule
   l'ENCRE suit : `--accent-texte` est deja calcule pour se lire sur cette
   couleur, c'est celle des boutons. Un pastel donne donc du texte sombre, un
   ton soutenu du texte blanc, comme sur les boutons.
   La classe est posee par appliquerTheme quand la teinte est claire ; une
   teinte foncee garde la barre foncee d'origine. */
/* L'EFFET MIROIR, EN OPTION (Parametres → Apparence).
   Stephanie, le 12/09/2026 : « tu peux mettre effet miroir ou pas ; si j'ai
   envie je le mets, si je n'ai pas envie je l'enlève. »
   C'est le reflet du « cristal » d'origine — un dégradé blanc en haut du bloc,
   un liseré clair et une ombre portée — mais POSE PAR-DESSUS la couleur, sans
   le fond translucide qui laissait la barre teindre les blocs. Les couleurs des
   groupes ne bougent donc pas, seul le rendu change. */
:root.effet-miroir #navigation .nav-bloc {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .55), rgba(255, 255, 255, .10) 46%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 3px 10px rgba(0, 0, 0, .22);
}
:root.effet-miroir #navigation .nav-groupe {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .85), rgba(255, 255, 255, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .14);
}
:root.effet-miroir #navigation a:hover {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
:root.effet-miroir #navigation a.actif,
:root.effet-miroir #navigation a.actif:hover {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(0, 0, 0, .18);
}
/* Les cartes et les boutons prennent le meme reflet : l'effet vaut pour toute
   l'application, pas seulement pour le menu. */
:root.effet-miroir .carte, :root.effet-miroir .kpi {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 42%);
}
/* Le bouton de couleur porte desormais son reflet en propre, qu'on ait choisi
   l'effet miroir ou non (voir .btn-primaire plus bas) : la regle qui lui posait
   un second degrade par-dessus est retiree le 20/09/2026. */

:root.barre-claire .barre-laterale {
  background: var(--accent);
  color: var(--accent-texte);
  border-right: 1px solid color-mix(in srgb, var(--accent) 78%, #000);
}
/* ⚠️ RIEN SUR LES BLOCS. Ils portent leur propre couleur et leur propre encre,
   sombre, quelle que soit la barre — « les onglets au niveau couleur ne doivent
   pas être touchés ». Seuls le titre de l'application, en haut, et le pied
   suivent l'encre de la barre. */

/* Le mode « clair » : le theme d'origine, mais impose — utile quand le Mac est
   en sombre et qu'elle veut quand meme le blanc. Les valeurs sont celles du
   `:root` du haut ; on ne les repete pas, il suffit de neutraliser le sombre. */
:root[data-theme="clair"] {
  --fond: #f4f2ec; --fond-carte: #ffffff; --fond-doux: #efece3;
  --texte: #2b2924; --texte-doux: #6d6759; --bordure: #e2ddd0;
  --accent: #5c7a5c; --accent-fonce: #43603f; --accent-clair: #eaf0e8;
  --urgent: #b23b2e; --urgent-fond: #f7e5e2;
  --important: #b7791f; --important-fond: #f8ecd8;
  --info: #3a6b8a; --ok: #3f7d4f; --ok-fond: #e2f2e6; --ok-texte: #2f6b3f;
  --ombre: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --u-elevage-ei: #2f6f9e; --u-elevage-ei-fond: #e3eef6;
  --u-elevage-sarl: #7a5296; --u-elevage-sarl-fond: #efe7f4;
  --u-pension: #b06a1f; --u-pension-fond: #f8ebdb;
  --u-autre: #6d6759; --u-autre-fond: #efece3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
  font-size: 15px;
}
a { color: var(--accent-fonce); }

#app { display: flex; min-height: 100vh; }

/* --- Barre laterale --- */
.barre-laterale {
  width: var(--barre-l);
  flex-shrink: 0;
  background: var(--accent-fonce);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
}
/* ⚠️ Le fond noir de la barre venait d'ICI, et il ignorait l'ambiance choisie :
   le Mac de Stephanie est en sombre, la barre restait donc noire meme en
   pastel. La regle ne s'applique plus que si AUCUNE ambiance n'est imposee. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .barre-laterale { background: #20241f; }
}
.marque { padding: 20px 18px 14px; display: flex; flex-direction: column; gap: 2px; }
.marque-nom { font-weight: 700; font-size: 1.05rem; }
.marque-sous { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
#navigation { flex: 1; overflow-y: auto; padding: 6px 0 14px; }

/* LA BARRE DE GAUCHE, EN QUATRE ESPACES.
   Stephanie, le 31/08/2026 : « je n'ai pas trop d'ecart quand on arrive sur Au
   quotidien ou Pension Pierrelatte. J'aurais vu plus de couleurs. Quand ma
   souris arrive sur Tableau de bord, on ne voit pas trop, il n'y a pas trop
   d'effet. Il faudrait faire un effet beaucoup plus cristal. »
   Chaque bloc porte sa teinte dans --teinte, et TOUT en decoule : le fond, le
   liseré, le titre, le survol et la page ouverte. Une seule variable a changer
   le jour ou La Garde-Adhemar arrivera. */
#navigation .nav-bloc { --teinte: var(--u-autre); }
#navigation .nav-bloc.g-pension { --teinte: var(--u-pension); }
#navigation .nav-bloc.g-elevage { --teinte: var(--u-elevage-ei); }
#navigation .nav-bloc.g-toutes  { --teinte: var(--u-elevage-sarl); }

/* ⚠️ LE BLOC NE SE LAISSE PAS TEINDRE PAR LA BARRE.
   Stephanie, le 12/09/2026 : « si la couleur de la barre est foncée, elle ne
   doit pas me foncer les blocs Au quotidien, Toutes structures, Consommables,
   Orange, Pierrelatte. »
   Il etait peint en TRANSLUCIDE — `teinte 30%, transparent` — donc le fond de
   la barre remontait au travers : barre foncee, blocs fonces. Il est desormais
   OPAQUE, teinte melangee a du blanc : sa couleur est la sienne, quelle que
   soit la barre. Son encre aussi, du coup : sombre, toujours. */
#navigation .nav-bloc {
  margin: 10px 8px 0; padding: 2px 6px 7px;
  border-radius: 13px;
  color: #2b2924;
  background: color-mix(in srgb, var(--teinte) 26%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--teinte) 46%, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
#navigation .nav-bloc.g-direction { margin-top: 4px; }

/* LE TITRE DU BLOC, EN VERRE DEPOLI.
   Stephanie, le 31/08/2026 : « le mot Au quotidien, il faudrait le faire un peu
   plus glace ou un peu plus gros, parce qu'on ne le voit pas du tout. Pension
   Pierrelatte, c'est pareil. Il faut qu'on le voie plus. »
   Il devient une pastille givree posee en haut du bloc : plus grand, presque
   blanc, sur un fond translucide qui le detache. */
#navigation .nav-groupe {
  margin: 7px 4px 7px; padding: 6px 11px;
  font-size: .73rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 800; line-height: 1.3;
  color: #2b2924;
  background: rgba(255, 255, 255, .62);
  border: 1px solid color-mix(in srgb, var(--teinte) 38%, #ffffff);
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
}

#navigation a {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0; padding: 8px 12px;
  color: #2b2924; text-decoration: none;
  font-size: .92rem; opacity: .9;
  border-radius: 9px; border: 1px solid transparent;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease,
    opacity .14s ease;
}
#navigation .ico { width: 20px; text-align: center; font-size: 1.02em; }

/* AU SURVOL : la ligne s'eclaire dans la couleur de son espace et avance d'un
   cheveu. On voit tout de suite ou l'on pointe. */
#navigation a:hover {
  opacity: 1;
  transform: translateX(3px);
  background: color-mix(in srgb, var(--teinte) 36%, #ffffff);
  border-color: color-mix(in srgb, var(--teinte) 56%, #ffffff);
  box-shadow: none;
}

/* LA PAGE OUVERTE : pleine couleur, texte en gras, et une lueur autour.
   « Quand je suis sur Alerte, que je voie Alerte. » */
#navigation a.actif,
#navigation a.actif:hover {
  opacity: 1; font-weight: 700; transform: none;
  background: color-mix(in srgb, var(--teinte) 62%, #ffffff);
  border-color: color-mix(in srgb, var(--teinte) 82%, #ffffff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

/* Un ecran qui demande de ne pas animer n'anime pas. */
@media (prefers-reduced-motion: reduce) {
  #navigation a { transition: none; }
  #navigation a:hover { transform: none; }
}

.barre-pied { padding: 12px 18px; font-size: .75rem; opacity: .7; display: flex; justify-content: space-between; align-items: center; }
.etat-demo:not(:empty) {
  background: var(--important); color: #fff; padding: 2px 7px; border-radius: 6px; font-weight: 600;
}

/* --- Zone principale --- */
.zone-principale { flex: 1; margin-left: var(--barre-l); display: flex; flex-direction: column; min-width: 0; }
.haut {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; background: var(--fond-carte);
  border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 20;
}
.haut h1 { font-size: 1.15rem; margin: 0; flex: 1; }
.haut-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bouton-menu { display: none; background: none; border: none; font-size: 1.4rem; color: var(--texte); cursor: pointer; }
main { padding: 24px; max-width: 1200px; width: 100%; }

/* --- Boutons --- */
.btn {
  font: inherit; font-weight: 600; border-radius: 9px; padding: 8px 15px;
  border: 1px solid var(--bordure); background: var(--fond-carte); color: var(--texte);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn:hover { border-color: var(--accent); }
/* ⚠️ `--accent-texte` et non `#fff` : avec une couleur principale pastel,
   du blanc sur du rose pale ne se lit pas. La teinte du texte est calculee
   sur la luminance de l'accent (voir `texteSurAccent` dans core.js). */
/* LE BOUTON DE COULEUR — PARTOUT LE MEME (20/09/2026).
   Stephanie : « il faudrait mettre sur "+ Evenement", tout ca ; il faut le
   mettre de partout. Ajouter... » L'effet miroir n'etait que sur l'onglet
   ouvert ; il vaut maintenant pour tous les boutons de couleur — l'onglet
   ouvert, « + Evenement », « + Ajouter », « Enregistrer ».
   Ce n'est pas un aplat : clair en haut, soutenu en bas, un liseré blanc sur
   l'arete superieure, une ombre courte dessous. Du verre, pas de la peinture.
   La couleur vient de `--accent-vif`, reglable a part dans Apparence.
   ⚠️ `.btn-principal` est ecrit dans plusieurs pages (le bouton « Entrer » de
   la connexion, des « Enregistrer ») mais n'avait AUCUN style : ces boutons
   restaient blancs. Le meme nom pour la meme chose. */
.btn-primaire, .btn-principal {
  /* ⚠️ `background-color` ET `background-image` SEPARES, jamais la forme
     raccourcie : la regle de l'effet miroir posait son propre
     `background-image`, plus specifique, et le raccourci avait au passage remis
     la couleur de fond a « transparent » — le bouton devenait blanc. */
  background-color: var(--accent-vif);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-vif) 32%, #fff) 0%,
    var(--accent-vif) 55%,
    color-mix(in srgb, var(--accent-vif) 96%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent-vif) 70%, #000);
  color: var(--accent-vif-texte, var(--accent-texte, #fff));
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 3px rgba(0, 0, 0, .16);
}
.btn-primaire:hover, .btn-principal:hover {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-vif) 20%, #fff) 0%,
    var(--accent-vif) 50%,
    color-mix(in srgb, var(--accent-vif) 92%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent-vif) 62%, #000);
}
.btn-danger { color: var(--urgent); border-color: transparent; background: transparent; }
.btn-danger:hover { background: var(--urgent-fond); border-color: var(--urgent); }
.btn-petit { padding: 5px 10px; font-size: .82rem; font-weight: 600; }
.btn:disabled { opacity: .55; cursor: default; }

/* --- Cartes / grilles --- */
.grille { display: grid; gap: 16px; }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.carte {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre);
}
.carte h2, .carte h3 { margin: 0 0 12px; }
.carte h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); }
.section-titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texte-doux); margin: 28px 0 12px; font-weight: 700;
}
.section-titre:first-child { margin-top: 0; }

/* --- Indicateurs --- */
.kpi { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre); }
.kpi .valeur { font-size: 1.9rem; font-weight: 700; color: var(--accent-fonce); }
.kpi .libelle { color: var(--texte-doux); font-size: .88rem; margin-top: 2px; }
.kpi.alerte .valeur { color: var(--urgent); }
.kpi .sous { font-size: .8rem; color: var(--texte-doux); margin-top: 6px; }

.ligne-stat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--bordure); font-size: .92rem; }
.ligne-stat:last-child { border-bottom: none; }
.ligne-stat .v { font-weight: 700; }
/* Bloc de coordonnees de la fiche client : le libelle est mis en avant, pas la
   valeur. C'est la colonne de gauche que l'oeil parcourt pour trouver la bonne
   ligne ; la valeur se lit ensuite. */
.ligne-stat.ligne-libelle-fort > span:first-child { font-weight: 700; }
.ligne-stat.ligne-libelle-fort .v { font-weight: 400; }

/* --- Tableaux --- */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-carte); }
table.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tableau th, table.tableau td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
table.tableau th { background: var(--fond-doux); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
table.tableau tr:last-child td { border-bottom: none; }
/* L'ALERTE QU'ON NE PEUT PAS MANQUER. « Un truc tres gros et tres rouge :
   attention livraison croquette obligatoire. » Elle passe avant tout le reste,
   elle est cliquable, et elle respire pour attirer l'oeil sans clignoter. */
.bandeau-criant {
  display: block; margin: 14px 0; padding: 18px 22px;
  border-radius: 12px; text-decoration: none;
  background: var(--urgent); color: #fff;
  border: 2px solid color-mix(in srgb, var(--urgent) 70%, #000);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--urgent) 45%, transparent);
  animation: respire 2.4s ease-in-out infinite;
}
.bandeau-criant:hover { filter: brightness(1.06); }
.bandeau-criant-titre {
  display: block; font-size: 1.22rem; font-weight: 800; line-height: 1.25;
  letter-spacing: .01em;
}
.bandeau-criant-sous {
  display: block; margin-top: 6px; font-size: .82rem; opacity: .9;
}
@keyframes respire {
  0%, 100% { box-shadow: 0 4px 18px color-mix(in srgb, var(--urgent) 45%, transparent); }
  50%      { box-shadow: 0 4px 26px color-mix(in srgb, var(--urgent) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .bandeau-criant { animation: none; } }

/* Version resserree : « les alertes, tu peux les reduire ». Trois bandeaux
   pleine hauteur mangeaient tout l'ecran avant le premier chiffre utile. */
.bandeau-criant.compact {
  margin: 5px 0; padding: 5px 11px; border-radius: 7px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-width: 1px;
  animation: none; box-shadow: none;
}
.bandeau-criant.compact .bandeau-criant-titre {
  display: inline; font-size: .82rem; font-weight: 700; line-height: 1.35;
}
.bandeau-criant.compact .bandeau-criant-sous {
  display: inline; margin: 0; font-size: .8rem; opacity: .92;
}

/* LE BANDEAU DE SECTEUR sur la feuille de travail. Stephanie, le 31/08/2026 :
   « il faudrait une partie elevage et une partie pension ». Chaque partie
   s'annonce par une barre dans sa couleur — on ne se demande jamais de quel
   site on est en train de parler. */
.bandeau-secteur {
  margin: 22px 0 10px; padding: 8px 14px; border-radius: 9px;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  border-left: 4px solid currentColor;
}
.bandeau-secteur.u-elevage {
  color: var(--u-elevage-ei);
  background: color-mix(in srgb, var(--u-elevage-ei) 14%, transparent);
}
.bandeau-secteur.u-pension {
  color: var(--u-pension);
  background: color-mix(in srgb, var(--u-pension) 14%, transparent);
}

/* Un filet entre les colonnes. Stephanie, le 31/08/2026, devant le suivi
   sanitaire : « on ne voit pas les colonnes, c'est complique ». */
.tableau-enveloppe.colonnes table.tableau th:not(:last-child),
.tableau-enveloppe.colonnes table.tableau td:not(:last-child) {
  border-right: 1px solid var(--bordure);
}
.tableau-enveloppe.colonnes table.tableau tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fond-doux) 55%, transparent);
}

/* Feuille dense : neuf colonnes doivent tenir sur l'ecran de son ordinateur. */
.tableau-enveloppe.serre table.tableau { font-size: .82rem; }
.tableau-enveloppe.serre table.tableau th,
.tableau-enveloppe.serre table.tableau td { padding: 5px 8px; }
.tableau-enveloppe.serre table.tableau th { font-size: .68rem; letter-spacing: .04em; }
table.tableau tr:hover td { background: var(--accent-clair); }
table.tableau td.actions { text-align: right; }
/* Cellule dont l'affichage est borne : le texte trop long est coupe par des
   points de suspension, sa valeur complete reste lisible au survol. */
.tronque { display: inline-block; max-width: 100%; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.vide { padding: 30px; text-align: center; color: var(--texte-doux); }

/* --- Badges --- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--fond-doux); color: var(--texte-doux); }
.badge.urgent { background: var(--urgent-fond); color: var(--urgent); }
.badge.important { background: var(--important-fond); color: var(--important); }
.badge.ok { background: var(--accent-clair); color: var(--ok); }
.badge.info { background: var(--accent-clair); color: var(--info); }

/* --- Univers d'activite : elevage Orange, elevage Pierrelatte, pension --- */
.badge.u-elevage-ei   { background: var(--u-elevage-ei-fond);   color: var(--u-elevage-ei); }
.badge.u-elevage-sarl { background: var(--u-elevage-sarl-fond); color: var(--u-elevage-sarl); }
.badge.u-pension      { background: var(--u-pension-fond);      color: var(--u-pension); }
.badge.u-autre        { background: var(--u-autre-fond);        color: var(--u-autre); }

.u-texte-elevage-ei   { color: var(--u-elevage-ei);   font-weight: 600; }
.u-texte-elevage-sarl { color: var(--u-elevage-sarl); font-weight: 600; }
.u-texte-pension      { color: var(--u-pension);      font-weight: 600; }
.u-texte-autre        { color: var(--u-autre); }

/* Filet colore en tete de carte ou de ligne, pour reperer l'univers sans lire */
.u-filet { border-left: 4px solid var(--u-autre); padding-left: 10px; }
.u-filet.u-elevage-ei   { border-left-color: var(--u-elevage-ei); }
.u-filet.u-elevage-sarl { border-left-color: var(--u-elevage-sarl); }
.u-filet.u-pension      { border-left-color: var(--u-pension); }

/* --- Barre d'outils de page --- */
.outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.outils .recherche { flex: 1; min-width: 180px; }
input, select, textarea {
  font: inherit; color: var(--texte); background: var(--fond-carte);
  border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* ⚠️ UNE CASE A COCHER N'EST PAS UN CHAMP DE SAISIE.
   La regle du dessus donne `width: 100%` a tous les `input` — la case du
   batiment 2 s'etalait donc sur toute la ligne et son texte tombait EN
   DESSOUS. Stephanie, le 12/09/2026 : « le petit carré d'ouverture ou non de
   la pension, il ne faut pas qu'il soit au-dessus du texte, mais à côté du
   texte. » Une case reprend sa taille, et l'etiquette qui la porte se lit en
   ligne. Vaut pour toutes les cases de l'application. */
input[type="checkbox"], input[type="radio"] {
  width: auto; margin: 0; flex: none; accent-color: var(--accent);
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--texte); cursor: pointer;
}
label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 4px; color: var(--texte-doux); }
.champ { margin-bottom: 14px; }
.champ .aide { font-size: .78rem; color: var(--texte-doux); font-weight: 400; margin-top: 3px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* --- Modale --- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modale { background: var(--fond-carte); border-radius: var(--rayon); box-shadow: 0 10px 40px rgba(0,0,0,.25); width: 100%; max-width: 560px; }
.modale-large { max-width: 820px; }
/* LA FICHE D'UN CHIEN PORTE UN TABLEAU, PAS UN FORMULAIRE.
   Stephanie, le 05/09/2026 : « tu me mets une largeur de colonnes et le texte
   chevauche sur Modifier et Supprimer. » Le registre a cinq colonnes dont une
   d'observations : a 820 px il debordait, et les deux boutons sortaient de
   l'ecran. On lui laisse la largeur de la fenetre, sans jamais depasser
   celle-ci. */
.modale-fiche { max-width: min(1180px, 95vw); }
/* Une portee de douze chiots ne tient pas dans une fenetre : son corps defile,
   l'entete et le pied restent en place. */
.modale .corps { max-height: min(72vh, 900px); overflow-y: auto; }
.modale header { padding: 16px 20px; border-bottom: 1px solid var(--bordure); display: flex; justify-content: space-between; align-items: center; }
.modale header h2 { margin: 0; font-size: 1.05rem; }
.modale .corps { padding: 20px; }
.modale footer { padding: 14px 20px; border-top: 1px solid var(--bordure); display: flex; justify-content: flex-end; gap: 10px; }
.fermer { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--texte-doux); }

/* --- Toast --- */
.zone-toast { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast { background: var(--texte); color: var(--fond); padding: 11px 16px; border-radius: 9px; box-shadow: var(--ombre); font-size: .9rem; max-width: 320px; }
.toast.ok { background: var(--ok); color: #fff; }
.toast.err { background: var(--urgent); color: #fff; }

/* --- Divers --- */
.avert { background: var(--important-fond); color: var(--important); border-radius: 9px; padding: 10px 14px; font-size: .86rem; margin-bottom: 16px; }
.info-bloc { background: var(--accent-clair); border-radius: 9px; padding: 12px 14px; font-size: .88rem; margin-bottom: 16px; }
.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li { padding: 9px 0; border-bottom: 1px dashed var(--bordure); display: flex; gap: 10px; align-items: baseline; font-size: .92rem; }
.liste-alertes li:last-child { border-bottom: none; }
.chargement { padding: 40px; text-align: center; color: var(--texte-doux); }
.mini-graph { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.mini-graph .barre { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.mini-graph .barre.dep { background: var(--important); }
.graph-legende { display: flex; gap: 16px; font-size: .8rem; color: var(--texte-doux); margin-top: 8px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* Calendrier */
/* LE MOIS TIENT DANS L'ECRAN.
   « Les cases sont trop larges, je ne vois pas ma semaine » (03/09/2026).
   Cases resserrees, en-tete de jour dans la case, week-end teinte. */
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-jour {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: 6px; min-height: 62px; padding: 4px 5px; font-size: .72rem;
  overflow: hidden;
}
.cal-jour .tete-jour {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px;
}
.cal-jour .num { font-weight: 700; color: var(--texte); font-size: .85rem; }
.cal-jour .jsem {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux);
}
/* Le week-end se lit sans compter les colonnes. */
.cal-jour.weekend { background: var(--fond-doux); }
.cal-jour.hors { opacity: .25; min-height: 62px; }
/* LE PASSE RECULE D'UN TON (20/09/2026).
   « On ne voit pas assez la date du jour. Toutes les dates passées, tu les
   mets sur fond gris. Tu n'enlèves rien. » Le contenu reste lisible — les
   evenements passes servent de preuve — mais la journee revolue ne se dispute
   plus l'attention avec aujourd'hui. */
.cal-jour.passe {
  background: #EDEAE3;
  border-color: #DCD7CC;
}
.cal-jour.passe.weekend { background: #E4E0D7; }
.cal-jour.passe .num,
.cal-jour.passe .jsem { color: #8A8578; }
.cal-jour.passe .cal-ev { opacity: .62; }
.cal-jour.passe:hover .cal-ev { opacity: 1; }

/* AUJOURD'HUI : un fond a lui, un liseré epais, et le numero en evidence. */
/* ⚠️ LA COULEUR VIVE, PAS LE PASTEL (20/09/2026).
   « Le jour d'aujourd'hui, je le voudrais en jaune un peu plus vif, parce qu'on
   ne voit absolument rien, il est trop fade. » Le liseré prenait `--accent` —
   son jaune tres pale — sur un fond `--accent-clair` plus pale encore : deux
   blancs l'un sur l'autre. Et le numero etait ecrit EN BLANC dessus, donc
   invisible. Tout passe en `--accent-vif`, avec l'encre qui va avec. */
.cal-jour.auj {
  border-color: color-mix(in srgb, var(--accent-vif) 72%, #000);
  border-width: 2px; padding: 3px 4px;
  background: color-mix(in srgb, var(--accent-vif) 22%, var(--fond-carte));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-vif) 40%, transparent);
}
.cal-jour.auj .num {
  color: var(--accent-vif-texte);
  background: var(--accent-vif);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-vif) 45%, #fff),
    var(--accent-vif) 60%,
    color-mix(in srgb, var(--accent-vif) 86%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  border-radius: 4px; padding: 0 5px; font-weight: 700;
}
.cal-jour.auj .jsem {
  color: color-mix(in srgb, var(--accent-vif) 55%, #000); font-weight: 700;
}
.cal-ev {
  background: var(--accent-clair); border-radius: 3px; padding: 0 4px;
  margin-top: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.5; font-size: .68rem;
}
.cal-entete { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); margin-bottom: 4px; font-weight: 700; }

@media (max-width: 860px) {
  .barre-laterale { transform: translateX(-100%); transition: transform .2s; }
  .barre-laterale.ouverte { transform: translateX(0); }
  .zone-principale { margin-left: 0; }
  .bouton-menu { display: block; }
  .champs-2 { grid-template-columns: 1fr; }
}

/* Cartes du tableau de bord renvoyant vers leur module. Le tableau de bord
   donne un chiffre ; il doit permettre d'aller voir ce qu'il y a derriere. */
.carte-lien { transition: border-color .15s, transform .15s; }
.carte-lien:hover { border-color: var(--accent, #7aa87a); transform: translateY(-1px); }
.carte-lien h3 a { color: inherit; text-decoration: none; }
.carte-lien h3 a:hover { text-decoration: underline; }
.kpi-lien { transition: border-color .15s, transform .15s; }
.kpi-lien:hover { border-color: var(--accent, #7aa87a); transform: translateY(-1px); }

/* En-tetes de colonnes triables. Un clic trie, un second inverse. */
.th-triable { user-select: none; white-space: nowrap; }
.th-triable:hover { text-decoration: underline; }

/* Barre d'onglets compacte. La page Finances en porte huit : a la taille
   normale ils passaient a la ligne et ecrasaient le haut de l'ecran. */
.outils-compact .btn { font-size: .78rem; padding: 5px 10px; }

/* LES BARRES D'ONGLETS DES PAGES.
   Stephanie, le 31/08/2026 : « je ne retrouve pas l'onglet ou il y a les
   investissements, je suis perdue. » La barre des Finances en porte huit :
   l'onglet ouvert doit sauter aux yeux, et le survol doit repondre.
   Meme grammaire « cristal » que la barre de gauche. */
.outils .btn:hover:not(.btn-primaire):not(:disabled) {
  background: var(--accent-clair);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* L'onglet ouvert d'une barre est un bouton principal : il prend donc le meme
   verre colore que « + Evenement » a cote de lui (voir .btn-primaire). Les
   onglets fermes ne bougent pas — Stephanie, le 20/09/2026 : « tu me les as
   deja tous mis en jaune alors qu'avant ils n'etaient pas en jaune ; je veux
   juste que quand on clique sur Sauvegardes, on voie un jaune plus soutenu. »
   Seul leur survol reste teinte, pour repondre au doigt (regle ci-dessus). */

/* Cartes de synthese resserrees, pour les ecrans qui comparent deux colonnes
   cote a cote. Stephanie : « quarante-cinq mille zero quatre-vingt-dix-sept,
   c'est beaucoup trop gros, reduis la police un max, pour aerer un peu. » */
.kpi-compact { padding: 10px 12px; }
.kpi-compact .valeur { font-size: 1.05rem; font-weight: 600; }
.kpi-compact .libelle { font-size: .76rem; margin-top: 1px; }
.kpi-compact .sous { font-size: .7rem; margin-top: 3px; line-height: 1.25; }

/* Barre d'onglets : les vues a gauche, l'action a droite. Stephanie, le
   31/08/2026 : le bouton « + Ajouter un soin » se retrouvait SOUS l'onglet
   « Vue d'ensemble » et se chevauchait avec lui, dans la meme couleur que les
   onglets — on ne le distinguait pas. */
.onglets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.onglets .a-droite { margin-left: auto; }

/* L'action principale d'une page : le meme ton que la couleur principale, mais
   plus fonce, pour qu'elle se detache des onglets sans jurer.
   On assombrit la couleur choisie plutot que d'utiliser --accent-fonce : dans le
   theme sombre, « fonce » designe en fait une variante PLUS CLAIRE, ce qui
   donnait un bouton pale. color-mix garde le meme ton dans les deux themes. */
.btn-action {
  background: var(--accent);                       /* repli si color-mix manque */
  background: color-mix(in srgb, var(--accent) 74%, #000);
  border-color: color-mix(in srgb, var(--accent) 74%, #000);
  color: #fff;
  font-weight: 600;
}
.btn-action:hover {
  background: color-mix(in srgb, var(--accent) 60%, #000);
  border-color: color-mix(in srgb, var(--accent) 60%, #000);
}

/* Une ligne de tableau qui ouvre une fiche doit se comporter comme un lien. */
.tableau tr.ligne-cliquable { cursor: pointer; }
.tableau tr.ligne-cliquable:hover td { background: var(--fond-doux); }

/* Les lignes de la liste des clients portent un filet de couleur a gauche :
   ambre pour la pension de Pierrelatte, bleu pour l'elevage d'Orange, violet
   pour ceux qui sont les deux. Stephanie doit les distinguer « d'un coup
   d'oeil », sans lire la colonne. */
.tableau tr:has(.badge.u-pension) td:first-child { box-shadow: inset 4px 0 0 var(--u-pension); }
.tableau tr:has(.badge.u-elevage-ei) td:first-child { box-shadow: inset 4px 0 0 var(--u-elevage-ei); }
.tableau tr:has(.badge.u-elevage-sarl) td:first-child { box-shadow: inset 4px 0 0 var(--u-elevage-sarl); }
.tableau tr:has(.badge.u-pension) td { background: color-mix(in srgb, var(--u-pension-fond) 34%, transparent); }
.tableau tr:has(.badge.u-elevage-ei) td { background: color-mix(in srgb, var(--u-elevage-ei-fond) 34%, transparent); }
.tableau tr:has(.badge.u-elevage-sarl) td { background: color-mix(in srgb, var(--u-elevage-sarl-fond) 40%, transparent); }

/* Le champ de recherche qui remplace les listes deroulantes trop longues. */
.recherche-champ { position: relative; }
.recherche-champ input { width: 100%; }
.recherche-resultats {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 15rem; overflow-y: auto;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.recherche-item { padding: 6px 10px; cursor: pointer; font-size: .88rem; }
.recherche-item:hover { background: var(--accent-clair); }
.recherche-vide { padding: 8px 10px; font-size: .85rem; color: var(--texte-doux); }
/* L'action de creation, en bas de la liste des resultats : un trait la separe
   des vrais resultats pour qu'on ne la choisisse jamais par erreur. */
.recherche-creer { border-top: 1px solid var(--bordure); color: var(--accent); }

/* Le calculateur d'acompte, en tete des encaissements : une aide a la saisie,
   pas un total. Il se lit sur une ligne et ne prend pas la place d'un champ. */
.aide-acompte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 6px 10px; border-radius: 6px;
  background: var(--fond-doux); border: 1px solid var(--bordure); }
.aide-acompte button[disabled] { opacity: .45; cursor: default; }

/* Le calendrier maison : grandes cases, fleches franches, mois en toutes lettres. */
.agenda-champ { position: relative; }
.agenda-champ input { width: 100%; }
.agenda {
  position: fixed; z-index: 200;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding: 10px; width: 17rem;
}
.agenda-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; }
.agenda-tete .btn { font-size: 1.1rem; line-height: 1; padding: 2px 12px; }
.agenda-mois { font-weight: 700; font-size: .92rem; text-transform: capitalize; }
.agenda-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.agenda-nom { text-align: center; font-size: .68rem; color: var(--texte-doux); padding: 2px 0; }
.agenda-jour {
  border: 1px solid transparent; background: var(--fond-doux); color: inherit;
  border-radius: 6px; padding: 7px 0; font-size: .86rem; cursor: pointer;
}
.agenda-jour:hover { border-color: var(--accent); }
.agenda-jour.aujourdhui { font-weight: 700; text-decoration: underline; }
.agenda-jour.choisi { background: var(--accent); color: var(--accent-texte, #fff);
  font-weight: 700; }
.agenda-pied { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
/* Les cases de complement gardent la grille a six semaines : le calendrier a
   toujours la meme hauteur, donc il ne saute plus d'un cote a l'autre. */
.agenda-vide {
  /* Meme gabarit qu'un jour, sans rien afficher : la grille garde ses six
     lignes et le calendrier sa hauteur, quel que soit le mois. */
  padding: 7px 0; font-size: .86rem; line-height: 1.2;
  border: 1px solid transparent;
}

/* L'ecran de connexion : sobre, centre, utilisable d'un doigt sur tablette. */
.connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--fond); padding: 20px;
}
.connexion .carte { padding: 26px 24px; }
.connexion input { width: 100%; font-size: 1.05rem; padding: 10px 12px; }

/* Les pastilles de la feuille de travail : assez grandes pour un doigt sur une
   tablette, dans un couloir de chenil. */
.pastille {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid var(--bordure); background: var(--fond-doux);
  font-size: .95rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texte-doux); padding: 0;
}
.pastille:hover { border-color: var(--accent); }
.pastille.ok { background: var(--accent-clair); border-color: var(--ok); color: var(--ok); }
.pastille.important { background: var(--important-fond); border-color: var(--important);
  color: var(--important); }
.pastille.urgent { background: var(--urgent-fond); border-color: var(--urgent);
  color: var(--urgent); }

/* LES TABLEAUX ANNUELS — planning de reproduction, vaccins, vermifuges.
   Stephanie, le 01/09/2026 : « faire le tableau plus petit, moins large ».
   Douze colonnes de mois plus la colonne des noms : sans resserrement, le
   tableau depassait l'ecran et decembre etait hors de vue. */
table.tableau.tableau-annuel { table-layout: fixed; font-size: .82rem; }
table.tableau.tableau-annuel th,
table.tableau.tableau-annuel td { padding: 4px 5px; }
table.tableau.tableau-annuel th { font-size: .68rem; letter-spacing: .02em; }
/* La colonne des noms garde sa place, les douze mois se partagent le reste. */
table.tableau.tableau-annuel th:first-child,
table.tableau.tableau-annuel td:first-child { width: 116px; }
table.tableau.tableau-annuel td:first-child strong { font-size: .82rem; }
table.tableau.tableau-annuel input { border-radius: 5px; }

/* UNE ALERTE QUI CLIGNOTE.
   Stephanie, le 02/09/2026 : « est-ce que tu peux faire une alerte qui
   clignote ? » — pour la mise bas, celle qu'il ne faut pas manquer.

   Battement lent et doux, pas un stroboscope : l'ecran reste ouvert toute la
   journee dans le bureau, et une pastille qui bat trop vite devient vite
   insupportable. On garde le texte parfaitement lisible en permanence : c'est
   le halo qui respire, pas la couleur. */
/* `--halo` porte la couleur du battement : sans lui, `currentColor` prendrait
   la couleur du TEXTE (blanc sur la pastille rose) et le halo serait blanc. */
/* Couleurs ecrites en dur, pas de var() ni de color-mix() ici : c'est la
   pastille, dessous, qui porte le rose.
   (Verifie le 02/09/2026 en pilotant l'animation a la main : le halo passe bien
   de 0 a 6 pixels et la pastille s'eclaircit. L'apercu automatise gelait la
   ligne de temps, l'animation ne s'y voyait pas tourner — ce n'etait pas la
   CSS.) */
@keyframes clignote {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); filter: brightness(1); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); filter: brightness(1.35); }
}
.clignote { animation: clignote 1.6s ease-in-out infinite; }

/* Qui a demande moins d'animation n'en aura pas : la couleur suffit a
   distinguer la ligne. */
@media (prefers-reduced-motion: reduce) { .clignote { animation: none; } }

/* LA LIGNE ENTIERE EN ROSE, ET QUI BAT.
   Stephanie, le 02/09/2026 : « tu me le mets sur toute la longueur, le rose et
   le clignotant, il faut que ca se voie mieux — la, on ne voit pas trop que ca
   clignote. La phrase entiere surlignee en rose. Tout ce qui est rendez-vous
   veto, il faut des alertes qu'on voit vraiment. »
   Ce n'est plus la pastille qui bat, c'est la bande entiere. */
.liste-alertes li.ligne-rose {
  background: var(--rose-alerte, #CC99FF);
  color: var(--rose-texte, #1A1206);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 5px 0;
  border: none;
  font-weight: 600;
}
.liste-alertes li.ligne-rose a,
.liste-alertes li.ligne-rose span { color: inherit; }
.liste-alertes li.ligne-rose a { text-decoration: none; }
.liste-alertes li.ligne-rose .badge {
  background: rgba(0, 0, 0, .22); color: inherit; border: none;
}
/* Les boutons Modifier / Supprimer posés sur une bande de couleur : « Supprimer »
   est rouge sur rouge des que la bande est rouge. Sur la bande, ils prennent la
   couleur du texte de la bande et un fond translucide — lisibles quelle que
   soit la teinte dessous. */
.liste-alertes li.ligne-rose .btn {
  background: #FFFFFF; color: #21201C; border-color: rgba(0, 0, 0, .15);
}
.liste-alertes li.ligne-rose .btn.btn-danger { color: #8A1A16; }

/* Le battement de la bande : on la fait pulser franchement, elle doit accrocher
   l'oeil depuis l'autre bout de la piece. Le texte ne disparait jamais — c'est
   l'eclat du fond qui varie, pas son opacite. */
@keyframes bande-rose {
  0%, 100% { filter: brightness(1);    box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  50%      { filter: brightness(1.45); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
.ligne-rose.clignote { animation: bande-rose 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ligne-rose.clignote { animation: none; } }

/* CE QUI RESTE A FAIRE BAT ; CE QUI EST POINTE S'ARRETE.
   Stephanie, le 12/09/2026 : « dans le travail du jour, il faut imperativement
   que tu mettes ce qu'il y a a faire, il faut que ca clignote. Et tant que ce
   n'est pas fait, tant qu'il n'y a pas une case fait ou non fait — des que tu
   cliques sur fait, ca arrete de clignoter. »

   La feuille du jour s'ouvre donc entierement battante et s'eteint poste par
   poste au fil de la journee. C'est ce qui rend le battement supportable : il
   n'est pas decoratif, il compte ce qui reste. Rien ne bat le soir. */
@keyframes reste-a-faire {
  0%, 100% { background: transparent; }
  50%      { background: var(--urgent-fond); }
}
.ligne-stat.a-faire {
  animation: reste-a-faire 1.4s ease-in-out infinite;
  box-shadow: inset 3px 0 0 var(--urgent);
  border-radius: 6px; padding-left: 9px;
}
/* La pastille vide bat elle aussi : dans la grille des chiens, il n'y a pas de
   ligne a colorer, seulement le rond a pointer. */
@keyframes pastille-a-faire {
  0%, 100% { box-shadow: 0 0 0 0 var(--urgent); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
.pastille.a-faire {
  border-color: var(--urgent);
  animation: pastille-a-faire 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ligne-stat.a-faire, .pastille.a-faire { animation: none; }
}

/* UNE ALERTE POINTEE « FAIT » S'ARRETE — POUR AUJOURD'HUI SEULEMENT.
   Stephanie, le 12/09/2026 : « des qu'il clique sur fait, ca arrete de
   clignoter, et ca passe au jour suivant : ca reclignote pour le 14
   septembre. » La ligne ne disparait pas : elle s'eteint. On voit ce qui a ete
   fait aujourd'hui, et le lendemain elle revient d'elle-meme. */
.liste-alertes li.pointee { animation: none; opacity: .42; }
.liste-alertes li.pointee a { text-decoration: line-through; }

/* LE BLOC D'ALERTES DU TRAVAIL DU JOUR, EN PLUS PETIT.
   « Tu peux mettre les polices plus petites » (12/09/2026) : c'est un rappel
   posé en tête de sa feuille de travail, pas le corps de la page — il doit
   tenir en haut sans repousser le travail lui-même hors de l'écran. */
.liste-alertes.compacte li {
  font-size: .8rem; padding: 5px 0; gap: 8px;
}
.liste-alertes.compacte li.ligne-rose { padding: 6px 10px; margin: 3px 0; }
.liste-alertes.compacte .badge { font-size: .64rem; padding: 1px 6px; }

/* ---------------------------------------------------------------------------
   LES GRAPHIQUES DE LA SYNTHESE
   Stephanie, le 02/09/2026 : « quand j'arrive a Synthese, est-ce que je peux
   avoir des histogrammes au lieu d'avoir des chiffres bruts ? »

   Deux series seulement — ce qui rentre, ce qui sort — et les memes couleurs
   partout, pour qu'on n'ait pas a relire la legende d'un graphique a l'autre.

   ⚠️ Ces deux couleurs ne sont pas choisies a l'oeil : elles sont passees au
   validateur (bande de clarte, chroma, separation pour les daltonismes protan
   et deutan, contraste sur le fond). Le vert --accent et l'ambre --important de
   l'application echouaient deux controles — le vert virait au gris et les deux
   teintes se confondaient. Ne pas les remplacer sans revalider. */
/* ⚠️ COULEURS REVUES LE 20/09/2026.
   Stephanie : « les couleurs sont moches, les recettes sont bleues, les
   depenses sont orange, bizarre. Fais-moi les recettes en joli bleu. Et les
   depenses… j'aime pas cet orange, orange rouge ; la il est orange marron,
   c'est pas beau. »
   Le bleu passe d'un marine sombre a un bleu franc et clair. Pour les depenses,
   elle a tranche le meme jour : « mets-moi plutot un gris ardoise. » L'orange
   brique disparait donc au profit d'une ardoise profonde — sobre, et qui laisse
   le bleu porter seul la couleur du graphique.
   ⚠️ CETTE PAIRE EST JUSTE, MAIS ELLE EST SERREE. Un bleu et un gris-bleu sont
   voisins par nature : la separation tombe a 18,6 en vision normale (plancher
   15), 19,3 en protanopie, 18,4 en deuteranopie (cible 8), pour des contrastes
   de 3,6 et 6,8 sur le fond des cartes (cible 3). Un gris ardoise plus clair
   (#64748B, #6B7280) passe SOUS le plancher : les deux series se confondent.
   Ne pas eclaircir ce gris sans refaire le calcul.
   Le theme sombre a son propre couple, calcule separement : sur fond sombre les
   deux couleurs s'eclaircissent et se rapprochent, il a fallu ouvrir le bleu et
   desaturer l'ardoise pour retrouver 19,6 de separation. */
:root {
  --vis-recettes: #3d8bd6;
  --vis-depenses: #4f5d6b;
  --vis-grille: rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --vis-recettes: #8cc8f7;
    --vis-depenses: #7f8a93;
    --vis-grille: rgba(255, 255, 255, .10);
  }
}

/* LE GRAPHIQUE NE PREND PLUS TOUTE LA LARGEUR (20/09/2026).
   Stephanie : « l'histogramme, beaucoup moins gros, parce que c'est enorme ce
   truc, ca prend toute la largeur. » Il etait etire de force sur la largeur de
   la carte (preserveAspectRatio="none") : plus l'ecran etait large, plus les
   barres s'epataient. Il garde maintenant ses proportions et s'arrete a sa
   taille de dessin. */
.graphe { width: 100%; max-width: 620px; display: block; overflow: visible; }
.graphe-bloc { max-width: 620px; }
.graphe .grille { stroke: var(--vis-grille); stroke-width: 1; }
.graphe .axe-texte { fill: var(--texte-doux); font-size: 10px; }
.graphe .mois-texte { fill: var(--texte-doux); font-size: 11px; }
/* Le texte porte les jetons de texte, jamais la couleur de la serie : c'est la
   pastille a cote qui porte l'identite. */
.graphe .valeur-texte { fill: var(--texte); font-size: 11px; font-weight: 600; }
.graphe .zone-survol { fill: transparent; cursor: default; }
.graphe .zone-survol:hover { fill: color-mix(in srgb, var(--texte) 6%, transparent); }

.graphe-legende {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; font-size: .82rem; color: var(--texte-doux);
}
.graphe-legende .pastille {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}

/* L'infobulle : elle suit la souris et donne les chiffres exacts, ce qui evite
   d'ecrire un nombre au-dessus de chaque barre. */
.graphe-bulle {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--fond-carte); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 8px;
  padding: 8px 11px; font-size: .8rem; box-shadow: var(--ombre);
  min-width: 150px;
}
.graphe-bulle .t { font-weight: 700; margin-bottom: 5px; }
.graphe-bulle .l { display: flex; justify-content: space-between; gap: 14px; }
.graphe-bulle .l .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* LE REGISTRE D'ENTREES ET SORTIES.
   Trois blocs, comme sur son registre papier : ENTREE, ANIMAL, SORTIE. Les
   filets verticaux separent les blocs, c'est ce qui rend la page lisible d'un
   coup d'oeil — et c'est ainsi qu'un controleur la parcourt. */
/* Largeurs fixees par le colgroup de la page, et non plus deduites du contenu :
   sans cela une seule adresse longue elargit toute la colonne. */
table.tableau.registre {
  font-size: .78rem; table-layout: fixed; width: 100%; min-width: 1040px;
}
/* Les entetes tiennent sur deux lignes plutot que d'imposer leur largeur. */
table.tableau.registre thead tr:last-child th {
  text-align: center; font-size: .63rem; line-height: 1.2;
  padding: 5px 4px; white-space: normal; hyphens: none;
}
/* Les entetes a cheval sur les deux lignes — « N° » et la colonne des boutons —
   se calaient en haut de leur case pendant que les autres etaient plus bas.
   « Numero, il est en haut, date d'entree, il est decale vers le bas » : on les
   centre en hauteur comme les autres. */
table.tableau.registre thead th { vertical-align: middle; }
/* ENTREE · ANIMAL · SORTIE : centres sur les colonnes qu'ils coiffent. La
   regle generale des tableaux aligne les entetes a gauche ; ces trois-la sont
   des titres de bloc, pas des titres de colonne. */
table.tableau.registre th.bloc-entree,
table.tableau.registre th.bloc-animal,
table.tableau.registre th.bloc-sortie {
  font-size: .72rem; letter-spacing: .12em; padding: 5px 6px;
  text-align: center !important;
}
table.tableau.registre th.bloc-entree { background: color-mix(in srgb, var(--ok) 16%, transparent); }
table.tableau.registre th.bloc-animal { background: color-mix(in srgb, var(--info) 14%, transparent); }
table.tableau.registre th.bloc-sortie { background: color-mix(in srgb, var(--important) 16%, transparent); }
/* Les separations de blocs : apres le n°, apres la provenance, apres la
   naissance. */
table.tableau.registre td:nth-child(1),
table.tableau.registre td:nth-child(3),
table.tableau.registre td:nth-child(8) { border-right: 2px solid var(--bordure); }
/* Des lignes basses : c'est un registre, pas une fiche.
   Le texte est centre EN HAUTEUR dans sa case : les colonnes n'ont pas le meme
   nombre de lignes — une adresse en prend trois quand une date en prend deux —
   et cale en haut, une ligne se lisait en escalier. */
table.tableau.registre td {
  vertical-align: middle; white-space: normal; line-height: 1.3;
  padding: 5px 6px;
}
table.tableau.registre thead tr:last-child th { vertical-align: middle; }
/* Le jour et le mois sur une ligne, l'annee en dessous : c'est ainsi qu'elle
   les ecrit a la main, et c'est ce qui rend les colonnes de dates etroites. */
table.tableau.registre .date-empilee { display: block; white-space: nowrap; }
table.tableau.registre .puce { display: block; }
table.tableau.registre .date-empilee .an { color: var(--texte-doux); }

/* Un numero d'identification se lit d'un bloc — jamais coupe en fin de ligne. */
table.tableau.registre .puce {
  white-space: nowrap; font-size: .72rem; font-variant-numeric: tabular-nums;
}
/* Seules les adresses ont le droit de casser un mot — provenance comprise :
   elle porte l'adresse complete du cedant depuis les retours. */
table.tableau.registre .adresse { overflow-wrap: anywhere; }
/* Un bloc centre dans sa colonne, mais dont le texte reste a gauche : c'est ce
   qu'il faut pour une adresse de deux ou trois lignes. */
table.tableau.registre .bloc-centre {
  display: inline-block; text-align: left; max-width: 100%;
}
table.tableau.registre td { word-break: normal; }

/* A l'impression, on ne veut que le registre : ni menu, ni boutons. */
@media print {
  /* Le registre s'edite a l'italienne : c'est le sens de sa page papier. */
  @page { size: A4 landscape; margin: 10mm; }
  .barre-laterale, .outils, .kpi, .grille, .aide { display: none !important; }
  table.tableau.registre { font-size: 8pt; min-width: 0; }
  table.tableau.registre thead tr:last-child th { font-size: 6.5pt; }
  table.tableau.registre .puce { font-size: 7pt; }
  table.tableau.registre th, table.tableau.registre td { padding: 2px 3px; }
  /* Une ligne ne se coupe pas entre deux pages, et les entetes se repetent. */
  table.tableau.registre thead { display: table-header-group; }
  table.tableau.registre tr { break-inside: avoid; }
}

/* LE DOSSIER PORTÉES — un onglet par chiot.
   « Là en l'occurrence il y en a cinq, donc il faut me faire cinq onglets »
   (02/09/2026). Un onglet souligne en rouge = un chiot dont il manque encore
   quelque chose au registre : c'est la seule chose qu'elle doit chercher des
   yeux en ouvrant la page. */
.portee-detail { margin-top: 14px; }
.portee-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.portee-titre { font-weight: 700; font-size: 1.05rem; }
.onglets-chiots {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--bordure); margin-bottom: 14px;
}
.onglets-chiots .onglet {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--texte-doux);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.onglets-chiots .onglet:hover { color: var(--texte); }
.onglets-chiots .onglet.actif {
  color: var(--texte); font-weight: 700; border-bottom-color: var(--accent);
}
/* Incomplet : le trait rouge reste visible meme quand l'onglet n'est pas actif,
   sinon il faudrait ouvrir les cinq pour savoir lequel reprendre. */
.onglets-chiots .onglet.incomplet { border-bottom-color: var(--urgent); }
.onglets-chiots .onglet.incomplet.actif { border-bottom-color: var(--urgent); }
.pastille-collier { font-size: .7rem; opacity: .7; }
.fiche-chiot { max-width: 760px; }
.fiche-chiot hr { border: 0; border-top: 1px solid var(--bordure); margin: 16px 0; }
.actions-fiche { margin-top: 16px; }
.ok-bandeau {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-left: 3px solid var(--ok);
  padding: 8px 12px; border-radius: 4px; margin-bottom: 14px; font-size: .9rem;
}

/* LE JOURNAL DES CORRECTIONS ET LES ARCHIVES DU REGISTRE.
   L'ancienne valeur barree et la nouvelle en clair : c'est la seule
   presentation ou l'on voit ce qui a change sans avoir a comparer. */
table.tableau.journal-corrections { font-size: .82rem; }
table.tableau.journal-corrections td { vertical-align: top; }
.val-avant { text-decoration: line-through; color: var(--texte-doux); }
.val-apres { font-weight: 600; }

table.tableau.archives { font-size: .85rem; }
.jeton-ok, .jeton-alerte {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .78rem; font-weight: 600;
}
.jeton-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.jeton-alerte { background: color-mix(in srgb, var(--urgent) 16%, transparent); color: var(--urgent); }
.jeton-partiel, .jeton-hors {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.jeton-partiel { background: var(--important-fond); color: var(--important); }
.jeton-hors { background: color-mix(in srgb, var(--texte-doux) 14%, transparent); color: var(--texte-doux); }
.jeton-ok, .jeton-alerte { white-space: nowrap; }

/* Le recap ICPE, onglet de Documents (16/09/2026). */
.recap-icpe { display: grid; gap: 18px; }
.recap-tete { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; }
.recap-titre { font-size: 1.05rem; font-weight: 700; }
.recap-compteurs { display: flex; flex-wrap: wrap; gap: 6px; }
.recap-groupe h3 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); }
table.recap-table { font-size: .85rem; }
table.recap-table { width: 100%; table-layout: fixed; }
table.recap-table td, table.recap-table th { white-space: normal; vertical-align: top; }
table.recap-table th:nth-child(2) { width: 30%; }
table.recap-table th:nth-child(3) { width: 7.5rem; }
.recap-doc { font-weight: 600; }
.recap-detail { font-size: .8rem; margin-top: 2px; }

/* Les deux boutons de fin de ligne du registre : corriger, et l'historique.
   Cales a droite, contre le bord du tableau — « il faut les mettre plus a
   droite » (02/09/2026). */
table.tableau.registre td.actions-registre {
  text-align: right !important; white-space: nowrap; padding: 2px 4px 2px 0;
}
table.tableau.registre td.actions-registre .btn { padding: 2px 3px; }

/* L'onglet courant de la barre d'outils du registre. */
.outils .btn.actif { background: var(--accent); color: var(--accent-texte); }

/* « Tatouage » devant un numero qui n'est pas une puce : un controle ne lit pas
   les deux de la meme facon, et un tatouage court ressemble sinon a une puce
   tronquee. */
table.tableau.registre .genre-id {
  font-size: .82em; color: var(--texte-doux); text-transform: uppercase;
  letter-spacing: .04em;
}

/* LE RECAPITULATIF D'UNE PORTEE : les chiots d'un coup d'oeil, avant d'ouvrir
   l'onglet de l'un d'eux. */
table.tableau.portee-recap { font-size: .85rem; width: 100%; }
table.tableau.portee-recap td, table.tableau.portee-recap th { padding: 6px 10px; }
table.tableau.portee-recap .puce {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tableau.portee-recap tr.ligne-cliquable { cursor: pointer; }

/* Les commandes passees mais pas encore livrees. Elles ne comptent pas au
   stock — les sacs ne sont pas la — mais elles doivent se voir, sinon un stock
   bas ne dit pas si la commande est deja partie. */
table.tableau.commandes-attente { font-size: .85rem; width: 100%; }
table.tableau.commandes-attente td, table.tableau.commandes-attente th {
  padding: 6px 10px;
}

/* Une commande deja passee : le bandeau reste, mais il rassure au lieu de
   reclamer. « Je n'aime pas ces commandes, j'ai encore mes alertes a
   commander » (02/09/2026) — un bandeau rouge qu'on ne peut pas eteindre
   apprend a ne plus regarder les bandeaux. */
/* Petit, sur une seule ligne, et d'un vert qui se voit : a 14 % le fond se
   confondait avec la page. « Mets-moi l'alerte beaucoup plus petite, et un vert
   un peu plus clair qu'on voit » (02/09/2026). */
.bandeau-commande {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--ok-fond);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-left: 3px solid var(--ok);
  padding: 5px 12px; border-radius: 6px; margin: 0 8px 6px 0;
  font-size: .8rem; line-height: 1.35; color: var(--texte);
}
/* Le vert du texte est un cran plus fonce que le jeton --ok : sur le fond
   clair, --ok tombait a 4,25:1, sous le seuil de lisibilite de 4,5. */
.bandeau-commande strong { color: var(--ok-texte); }
.bandeau-commande .reste { color: var(--texte-doux); }

/* Les lignes d'une commande a plusieurs produits. */
.lignes-commande { display: flex; flex-direction: column; gap: 8px; }
.ligne-commande {
  display: grid; grid-template-columns: 1fr 120px auto; gap: 10px;
  align-items: end;
}
.ligne-commande .champ { margin: 0; }

/* Sans les onglets de famille, un sous-titre remet des reperes dans la liste
   des stocks : Alimentation, Petit materiel, Produits d'entretien. */
.sous-titre-famille {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texte-doux); margin: 14px 0 6px;
}

/* Creer un produit SANS quitter la commande : l'application n'a qu'une seule
   zone de fenetre, une seconde fenetre effacait la commande en cours. */
.creer-produit {
  margin-top: 12px; padding: 12px; border-radius: 6px;
  background: var(--fond-doux); border: 1px dashed var(--bordure);
}
.creer-produit .trio {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.creer-produit .champ { margin: 0; }

/* Le nom du chien en gras, son affixe dessous en plus petit — la regle vaut
   pour tous les tableaux (Stephanie, 03/09/2026). */
.nom-chien .nom { line-height: 1.25; }
.nom-chien .affixe {
  font-size: .78em; font-weight: 400; color: var(--texte-doux);
  line-height: 1.2; text-transform: none;
}

/* Le fanion jaune devant un nom : les radios de dysplasie peuvent etre faites.
   Jaune, pas rouge — ce n'est pas un manquement, c'est une possibilite qui
   s'ouvre a douze mois. */
.drapeau-jaune {
  color: var(--important); font-weight: 700; cursor: help; font-size: .95em;
}
/* « Mets-le plus gros, on ne le voit pas » (03/09/2026) : contre la colonne des
   cotations, il lui faut la taille d'un signal, pas d'une ponctuation. */
.drapeau-jaune.gros {
  font-size: 1.35rem; line-height: 1; margin-left: 8px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--important) 55%, transparent));
}

/* LA SYNTHESE : trois lignes par lice — le nom en gras, l'affixe en petit, la
   date de naissance. La premiere colonne doit tenir l'affixe le plus long
   (« DU TISSERAND DU BREUILH ») sans le couper : elle est en nowrap, faute de
   quoi l'affixe partait sur une quatrieme ligne. */
table.tableau.tableau-annuel thead th:first-child,
table.tableau.tableau-annuel tbody td:first-child {
  width: 176px; min-width: 176px;
}
table.tableau.tableau-annuel tbody td:first-child .nom-chien .affixe {
  font-size: .66rem; letter-spacing: 0;
}

/* LA SYNTHESE SUR UN TELEPHONE (22/09/2026).
   Stephanie, le jour de la mise en ligne : « je suis dans Orange reproduction,
   c'est illisible. Sur le telephone. »
   Elle avait raison : douze mois plus le nom, l'affixe et la date de naissance
   ne tiennent pas dans 375 pixels. Les en-tetes se chevauchaient en une
   bouillie — « JAFEMRAVRIAJUJNAOSEPDUNTOX » — et les pastilles etaient
   reduites a des traits.
   Le conteneur defilait deja, mais le tableau est en `table-layout: fixed` :
   il se comprimait au lieu de deborder. On lui impose donc une largeur
   minimale, et la colonne des noms reste COLLEE a gauche pendant qu'on fait
   glisser les mois — sinon on ne sait plus de quelle chienne on lit la ligne. */
.annuel-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 820px) {
  table.tableau.tableau-annuel { min-width: 700px; }
  table.tableau.tableau-annuel thead th:first-child,
  table.tableau.tableau-annuel tbody td:first-child {
    position: sticky; left: 0; z-index: 2;
    width: 132px; min-width: 132px;
    /* Un fond opaque : sans lui, les mois defileraient SOUS le nom en
       transparence et tout deviendrait illisible. */
    background: var(--fond-carte);
    box-shadow: 1px 0 0 var(--bordure);
  }
  table.tableau.tableau-annuel thead th:first-child { background: var(--fond-doux); }
  /* La legende prend quatre lignes sur un telephone : on la resserre. */
  .legende-annuelle .btn, .legende-annuelle span { font-size: .72rem; }
}

/* Le catalogue des produits : prix unitaire HT, TVA, TTC. */
table.tableau.catalogue { font-size: .85rem; width: 100%; }
table.tableau.catalogue td, table.tableau.catalogue th { padding: 6px 10px; }
table.tableau.catalogue td { font-variant-numeric: tabular-nums; }

/* UNE COMMANDE SE LIT COMME UNE COMMANDE : un fournisseur, une date, un
   montant, et les produits dedans. « Il n'y a pas six commandes, il n'y en a
   que deux » (03/09/2026) — une ligne par produit en base, une carte par
   commande a l'ecran. */
.commande-carte { margin-bottom: 10px; }
.commande-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.commande-tete .fournisseur { font-weight: 700; font-size: 1.02rem; }
.commande-tete .montant {
  font-weight: 700; font-size: 1.05rem; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.commande-lignes { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.commande-lignes li { margin: 2px 0; }
.commande-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}

/* CONSOMMABLES : DEUX BLOCS, DEUX SUJETS.
   « Je ne vois pas la difference entre stock et commande, il faudrait que
   visuellement ce soit plus clair [...] c'est trop charge » (03/09/2026).
   Ce qu'on ATTEND en haut, ce qu'on A en dessous. */
.bloc-consommables {
  border-radius: 10px; margin-bottom: 18px; overflow: hidden;
  border: 1px solid var(--bordure);
}
.bloc-consommables > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
}
.bloc-consommables > header h2 {
  margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  display: flex; align-items: center; gap: 8px;
}
.bloc-consommables > header .compteur {
  background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 1px 8px;
  font-size: .8rem; letter-spacing: 0;
}
.bloc-consommables > .corps { padding: 14px 16px; }

/* LES DEUX BLOCS DOIVENT SE DISTINGUER AU PREMIER COUP D'OEIL.
   Stephanie, le 04/09/2026 : « ta maniere de presenter stock et commande me
   derange, les couleurs ne sont pas assez soutenues, on ne voit pas trop la
   difference. » Les en-tetes etaient des teintes a 16 % : sur fond sombre, deux
   gris. Ils deviennent pleins, avec un liseré de la meme couleur sur toute la
   hauteur du bloc — bleu pour ce qui est attendu, vert d'eau pour ce qu'on a. */
.bloc-commandes { border-color: var(--info); border-left: 5px solid var(--info); }
.bloc-commandes > header {
  background: color-mix(in srgb, var(--info) 34%, var(--fond-carte));
  color: var(--texte);
}
.bloc-commandes .commande-carte {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
.bloc-commandes .commande-carte:last-child { margin-bottom: 0; }

/* Le stock : ce qu'on a vraiment. */
.bloc-stock { border-color: var(--accent); border-left: 5px solid var(--accent); }
.bloc-stock > header {
  background: color-mix(in srgb, var(--accent) 34%, var(--fond-carte));
  color: var(--texte);
}
.bloc-stock > header .compteur, .bloc-commandes > header .compteur {
  background: rgba(0, 0, 0, .08);
}

/* Le site et ses gestes sur une seule ligne. */
.site-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 2px;
  border-top: 1px solid var(--bordure); padding-top: 12px;
}
.bloc-stock .corps > .site-tete:first-child { border-top: 0; padding-top: 0; }
.site-tete .nom-site {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700;
}
.site-tete .gestes { display: flex; gap: 6px; flex-wrap: wrap; }

/* Les agendas exterieurs branches sur le calendrier. */
.agenda-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--bordure);
}
.agenda-ligne .erreur-agenda { color: var(--urgent); font-size: .82rem; }
.ajout-agenda {
  display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 10px;
  align-items: end; margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--bordure);
}
.ajout-agenda .champ { margin: 0; }

/* Qui lit cet evenement : l'etat se lit sur le bouton, et le bouton le change.
   Un reglage explicite se distingue du defaut herite de l'agenda. */
.visibilite-btn {
  margin-left: 8px; font-size: .74rem; padding: 1px 8px; opacity: .65;
}
.visibilite-btn:hover { opacity: 1; }
.visibilite-btn.choisi {
  opacity: 1; border-color: var(--important);
  color: var(--important); font-weight: 600;
}

/* Le reglage de visibilite d'un agenda, sur sa ligne. */
.agenda-reglage { display: flex; align-items: center; gap: 8px; }
.agenda-reglage label { font-size: .78rem; white-space: nowrap; }
.agenda-reglage select { min-width: 150px; }

/* LE CHOIX DE PARTAGE, A LA CREATION D'UN RENDEZ-VOUS.
   « Il faut impérativement que j'aie un lien qui me dise : je le garde, ou je
   le partage avec Rudy, ou tout le monde » (03/09/2026). Trois choix visibles,
   aucun pre-selectionne : le partage est un geste, pas un oubli. */
.choix-partage { display: flex; flex-direction: column; gap: 8px; }
.choix-partage .choix {
  text-align: left; padding: 10px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--fond-doux);
  color: var(--texte); font: inherit;
}
.choix-partage .choix:hover { border-color: var(--accent); }
.choix-partage .choix .t { font-weight: 600; }
.choix-partage .choix .s { font-size: .82rem; color: var(--texte-doux); margin-top: 2px; }
.choix-partage .choix.actif {
  border-color: var(--accent); border-width: 2px; padding: 9px 13px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.choix-partage .choix.actif .t::after { content: ' ✓'; color: var(--accent); }

/* TERMINER UNE TACHE : une petite case a cocher, tout a gauche.
   « Moi je clique dessus, paf, ça s'enlève » (03/09/2026). Discrete au repos,
   franche au survol — le geste doit être sûr, pas hésitant. */
.coche-tache {
  display: inline-block; width: 17px; height: 17px; padding: 0; margin: 0;
  border: 1.5px solid var(--bordure); border-radius: 4px;
  background: transparent; cursor: pointer; vertical-align: middle;
  position: relative; transition: border-color .12s, background .12s;
}
.coche-tache:hover { border-color: var(--ok); background: var(--ok-fond); }
.coche-tache:hover::after {
  content: '✓'; position: absolute; inset: 0; line-height: 15px;
  text-align: center; color: var(--ok); font-size: .8rem; font-weight: 700;
}
.coche-tache.faite {
  border-color: var(--ok); background: var(--ok-fond); color: var(--ok);
  line-height: 15px; text-align: center; font-size: .8rem; font-weight: 700;
}
/* Une tache terminee se rouvre du meme geste : le survol le dit. */
.coche-tache.faite:hover { border-color: var(--texte-doux); background: transparent; }
.coche-tache.faite:hover::after { content: none; }

/* Le numero d'une tache : discret, mais lisible et selectionnable — c'est par
   lui qu'on la designe dans une conversation. */
.numero-tache {
  font-variant-numeric: tabular-nums; color: var(--texte-doux);
  font-size: .82rem; white-space: nowrap;
}

/* LA FENETRE DU JOUR (03/09/2026).
   « Quand j'appuie sur un jour, je voudrais qu'une nouvelle fenetre s'ouvre et
   que je puisse voir la journee en detail. » La case doit donc se voir comme
   cliquable, sans pour autant s'agiter au moindre passage de souris. */
.cal-jour.cliquable { cursor: pointer; transition: border-color .12s, background .12s; }
.cal-jour.cliquable:hover { border-color: var(--accent); background: var(--accent-clair); }
.cal-jour.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.liste-jour { list-style: none; margin: 0; padding: 0; }
.liste-jour li {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 5px 2px; border-bottom: 1px solid var(--bordure);
}
.liste-jour li:last-child { border-bottom: 0; }
/* Une puce a soi : `.pastille` est deja pris deux fois dans cette feuille, la
   seconde definition en fait un bouton bordé. */
.puce-jour {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-top: .32em; flex: 0 0 auto;
}
/* Les titres de la fenetre du jour : « arrivee, depart, majuscule aussi ». */
.titre-bloc-jour {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; color: var(--texte-doux);
}
/* La coche « c'est fait » de la fenetre du jour (03/09/2026). */
.coche-jour { margin-top: .28em; flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; }
.liste-jour li.fait > span:last-child { opacity: .5; }
.liste-jour li.fait strong { text-decoration: line-through; }

/* « Elle est exactement la meme couleur » — et elle l'etait, dans son onglet :
   la page unique gardait l'ancien code. Le bandeau le dit, et ne recharge rien
   tout seul. */
.bandeau-maj {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 900; display: flex; align-items: center; gap: 10px;
  background: var(--fond-carte); color: var(--texte);
  border: 1px solid var(--accent); border-radius: var(--rayon);
  padding: 10px 14px; box-shadow: var(--ombre); font-size: .84rem;
  max-width: calc(100vw - 32px);
}

/* DEUX FAMILLES SUR UNE LIGNE (04/09/2026).
   « Ca fait une grande bande qui tient toute la largeur. Il me faudrait deux
   blocs, un bloc alimentation et un bloc produits d'entretien, qui tiennent sur
   une ligne. » */
.familles-cote-a-cote {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 20px; align-items: start;
}
.colonne-famille { min-width: 0; }

/* LA RECHERCHE DE CLIENT DANS LA VENTE (04/09/2026).
   « Que je puisse les retrouver avec les trois premieres lettres de leur nom,
   et entre parentheses le nom du ou des chiens. » */
.champ-recherche { position: relative; }
.suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--fond-carte); border: 1px solid var(--accent);
  border-radius: 8px; box-shadow: var(--ombre);
  max-height: 260px; overflow-y: auto; margin-top: 2px;
}
.suggestions .suggestion {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--bordure); cursor: pointer;
  padding: 7px 10px; font-size: .84rem; color: var(--texte); font-family: inherit;
}
.suggestions .suggestion:last-child { border-bottom: 0; }
.suggestions button.suggestion:hover,
.suggestions button.suggestion:focus-visible { background: var(--accent-clair); }

/* Le nom du fichier dans la liste des documents : une colonne etroite, le
   chemin complet en infobulle (04/09/2026). */
.nom-fichier {
  display: inline-block; max-width: 15rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  font-size: .86em; color: var(--texte-doux);
}

/* Le nom d'un chien ouvre sa fiche (04/09/2026). */
.lien-fiche { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--texte-doux); }
.lien-fiche:hover { color: var(--accent-fonce); border-bottom-color: var(--accent); }

/* Les deux carres de la fiche : ce qui a ete fait, ce qui vient (04/09/2026). */
.deux-carres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 14px; align-items: start;
}
.ligne-stat .v.en-retard { color: var(--urgent); font-weight: 700; }

/* L'observation d'un soin tient sur plusieurs lignes plutot que d'etirer la
   colonne sur tout l'ecran (04/09/2026). */
/* ⚠️ SPECIFICITE : `table.tableau td` impose `white-space: nowrap` a toutes les
   cellules. Une simple classe (.obs-soin) ne pesait pas assez et le texte
   restait sur une ligne, coupe, en passant sous les boutons. Il faut viser
   aussi precisement que la regle qu'on corrige. */
table.tableau td.obs-soin {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  font-size: .86em;
}
/* ⚠️ LARGEURS FIXES, SINON L'OBSERVATION POUSSE LES BOUTONS DEHORS.
   Stephanie, le 05/09/2026 : « le texte chevauche sur Modifier et Supprimer. »
   En largeur automatique, une observation de trois lignes reclame sa place et
   la prend a ses voisines ; le tableau depasse alors la fenetre et les deux
   boutons sortent de l'ecran. Avec `table-layout: fixed`, chaque colonne a la
   largeur qu'on lui donne et c'est le TEXTE qui va a la ligne. */
.registre-soins { table-layout: fixed; width: 100%; }
/* L'EN-TETE CENTRE, LE CONTENU A GAUCHE.
   Stephanie, le 05/09/2026 : « mets-moi l'en-tete de ligne au milieu, centre-moi
   Date, Type, Produit-taux-etalon et Observations. Juste l'en-tete, parce
   qu'apres, l'interieur des colonnes, tu me mets tout a gauche. »
   ⚠️ `table.tableau th` aligne a gauche : il faut viser aussi precisement,
   sinon la regle generale l'emporte — c'est ce qui venait de se passer avec le
   retour a la ligne des observations. */
table.tableau.registre-soins th { text-align: center; }
.registre-soins th:nth-child(1), .registre-soins td:nth-child(1) { width: 6.5rem; }
.registre-soins th:nth-child(2), .registre-soins td:nth-child(2) { width: 7.5rem; }
.registre-soins th:nth-child(3), .registre-soins td:nth-child(3) { width: 11rem; }
table.tableau.registre-soins td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.registre-soins th:nth-child(5), .registre-soins td:nth-child(5) { width: 13rem; }
.registre-soins td input, .registre-soins td select { max-width: 100%; }
.tableau td { vertical-align: top; }

/* --- LE REGISTRE DE SUIVI SANITAIRE ---------------------------------------
   Stephanie, le 06/09/2026 : « je ne vois pas le registre sanitaire ». Il se
   lit comme un registre papier : un intertitre par mois, une pastille par
   rubrique, et des colonnes de dates etroites. */
.bandeau-registre {
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--fond-doux); border: 1px solid var(--bordure);
  border-radius: 10px;
}
.titre-registre { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }

table.tableau.registre-sanitaire { table-layout: auto; }
table.tableau.registre-sanitaire th { text-align: center; }
table.tableau.registre-sanitaire td.date-registre {
  white-space: nowrap; width: 1px; font-variant-numeric: tabular-nums;
}
table.tableau.registre-sanitaire td.puce-registre {
  white-space: nowrap; width: 1px;
  font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--texte-doux);
}
/* L'inscription est du texte : elle passe a la ligne, sinon elle deborde sur
   la colonne des pieces jointes. */
table.tableau.registre-sanitaire td.obs-soin { white-space: normal; }
table.tableau.registre-sanitaire td.manque {
  color: #C08457; font-style: italic; font-size: .8rem;
}

tr.mois-registre td {
  background: var(--fond-doux); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux);
  padding: 5px 10px !important;
}
/* Un rappel PREVU n'est pas un acte fait : il se voit, mais en retrait. */
table.tableau.registre-sanitaire tr.prevu td { opacity: .62; font-style: italic; }
table.tableau.registre-sanitaire tr.sorti td { opacity: .68; }

/* La rubrique s'ecrit sur deux ou trois lignes courtes plutot que sur une
   longue : la colonne cesse alors de manger la largeur du tableau. */
table.tableau.registre-sanitaire td.col-rubrique { white-space: normal; width: 1px; }
.pastille-rubrique div { line-height: 1.15; }
.pastille-rubrique {
  display: inline-block; padding: 3px 9px; border-radius: 10px;
  font-size: .74rem; white-space: normal; text-align: center;
  background: color-mix(in srgb, var(--teinte) 22%, var(--fond-carte));
  border: 1px solid color-mix(in srgb, var(--teinte) 45%, transparent);
  color: color-mix(in srgb, var(--teinte) 70%, var(--texte));
}

/* A l'impression, le registre doit tenir seul sur la feuille : ni menu, ni
   boutons, ni couleurs de fond qui mangent l'encre. */
@media print {
  #navigation, .outils, .barre-haut, header.appli { display: none !important; }
  .bandeau-registre { border: 0; background: none; padding: 0; }
  table.tableau.registre-sanitaire { font-size: 8.5pt; }
  table.tableau.registre-sanitaire tr { page-break-inside: avoid; }
  .pastille-rubrique { border: 0; background: none; padding: 0; color: #000; }
}

/* Le trombone du registre : discret, mais cliquable. */
.lien-piece { text-decoration: none; opacity: .75; }
.lien-piece:hover { opacity: 1; }

/* --- L'ANNEXE 3.3.2, A L'IDENTIQUE DE LA FEUILLE PAPIER -------------------
   Stephanie, le 06/09/2026 : « tous les tableaux, il faut que ce soit
   exactement les memes que le reglement sanitaire que je presente au
   controle. » Titre centre sur fond gris, reference en petit dessous, en-tetes
   de colonnes centres et encadres : c'est sa feuille. */
.entete-annexe {
  background: var(--fond-doux); border: 1px solid var(--texte);
  border-bottom: 0; padding: 10px 12px 8px; text-align: center;
}
.titre-annexe {
  font-weight: 800; font-size: 1.12rem; letter-spacing: .02em;
  text-transform: uppercase;
}
.ref-annexe { font-size: .74rem; color: var(--texte-doux); margin-top: 2px; }

table.tableau.annexe-soins { table-layout: auto; border-collapse: collapse; }
table.tableau.annexe-soins th,
table.tableau.annexe-soins td {
  border: 1px solid var(--bordure); text-align: center; white-space: nowrap;
}
table.tableau.annexe-soins th { font-weight: 700; background: var(--fond-doux); }
/* La colonne libre de la feuille : elle seule passe a la ligne. */
table.tableau.annexe-soins td.obs-soin {
  white-space: normal; text-align: left; min-width: 150px;
}
/* Signature : une case vide, large, qui se signe au stylo. */
table.tableau.annexe-soins .col-signature { min-width: 110px; }
.case-controle.etat-fait { color: #3F7D4F; }
.case-controle.etat-a-surveiller { color: #B5852F; }
.case-controle.etat-probleme { color: #C0524A; font-weight: 700; }

@media print {
  .entete-annexe { border-color: #000; background: none; }
  table.tableau.annexe-soins th, table.tableau.annexe-soins td { border-color: #000; }
  table.tableau.annexe-soins { font-size: 8.5pt; }
}

/* --- LE SOMMAIRE : L'ETABLISSEMENT, PUIS L'ACTIVITE ------------------------
   « Dans le sommaire, il faut qu'il y ait Orange et Pierrelatte. Et dans
   Orange, tu as l'elevage ; et dans Pierrelatte, tu as la pension et
   l'elevage » (06/09/2026). Le titre d'etablissement domine ; l'activite est
   un intertitre plus discret, en retrait. */
.nav-sous-groupe {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .62; padding: 9px 12px 3px; font-weight: 600;
}
.nav-sous-groupe:first-of-type { padding-top: 4px; }

/* --- LES PIECES D'UN STAGIAIRE -------------------------------------------
   « Quand je clique sur le nom du stagiaire, une fenetre s'ouvre et j'ai sa
   convention de stage » (07/09/2026). Une ligne par piece, le nom qui ouvre
   le fichier, la suppression a droite et discrete. */
.liste-pieces { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ligne-piece {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--fond-carte);
}
.ligne-piece .nom-fichier { flex: 1; text-decoration: none; }
.ligne-piece .nom-fichier:hover { text-decoration: underline; }

:root {
  --cal-fond: #F7F7F4;      /* la grille : un gris tres pale */
  --cal-weekend: #EDEDE8;   /* le week-end : un ton en dessous */
}
:root[data-theme="sombre"] { --cal-fond: #24231E; --cal-weekend: #2C2B24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="pastel"]):not([data-theme="clair"]) {
    --cal-fond: #24231E; --cal-weekend: #2C2B24; }
}

/* --- LE CALENDRIER DES STAGIAIRES ----------------------------------------
   Stephanie, le 07/09/2026 : « mettre calendrier, une couleur par stagiaire,
   avec leurs dates », en joignant son calendrier scolaire — les douze mois en
   colonnes, les jours de 1 a 31 en lignes. On reprend cette forme. */
table.tableau.calendrier-annee { table-layout: fixed; border-collapse: collapse; }
/* UN FOND GRIS TRES PALE (20/09/2026).
   Stephanie : « le calendrier, tu me le fais un fond gris tres tres pale. »
   La grille etait blanche : les couleurs des stagiaires y flottaient sans
   assise, et les vacances devaient crier pour se voir. Sur un gris tres pale,
   trois niveaux se lisent sans se disputer — la grille, le week-end, les
   vacances — et les couleurs des stagiaires ressortent d'autant mieux. */
table.tableau.calendrier-annee th,
table.tableau.calendrier-annee td {
  border: 1px solid var(--bordure); padding: 0; text-align: center;
  font-size: .68rem; line-height: 1.55; height: 18px;
  background: var(--cal-fond);
}
table.tableau.calendrier-annee thead th {
  background: var(--fond-doux); font-weight: 700; font-size: .72rem;
  padding: 3px 2px;
  /* Le titre du mois ne deborde plus sur la colonne d'a cote : il est coupe
     net, et le mois entier reste dans la bulle. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.tableau.calendrier-annee .col-jour {
  background: var(--fond-doux); font-weight: 700; width: 26px;
}
table.tableau.calendrier-annee .col-nomjour {
  /* La case porte « Lu 1 », nom du jour ET numero : il lui faut de quoi tenir
     sans se couper (12/09/2026). */
  width: 32px; color: var(--texte-doux); font-size: .62rem;
  white-space: nowrap; text-align: center; padding-left: 2px; padding-right: 2px;
}
table.tableau.calendrier-annee .case-cal { width: 22px; }
table.tableau.calendrier-annee .weekend { background: var(--cal-weekend); }
table.tableau.calendrier-annee .jour-inexistant {
  background: repeating-linear-gradient(45deg,
    transparent, transparent 3px, var(--bordure) 3px, var(--bordure) 4px);
}
/* Deux stagiaires le meme jour : la case porte LEURS DEUX COULEURS, en
   diagonale. Un chiffre « 2 » ne disait rien a personne (07/09/2026). */
table.tableau.calendrier-annee .case-cal.partage {
  box-shadow: inset 0 0 0 1px var(--fond-carte);
}

.legende-stagiaires {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 10px;
  font-size: .8rem;
}
.puce-stagiaire { display: inline-flex; align-items: center; gap: 6px; }
.puce-stagiaire .carre {
  width: 13px; height: 13px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,.15);
}

@media print {
  table.tableau.calendrier-annee th,
  table.tableau.calendrier-annee td { border-color: #000; }
  table.tableau.calendrier-annee .case-cal.occupe { print-color-adjust: exact; }
}

/* --- LE CHOIX D'UNE PERIODE DE STAGE -------------------------------------
   Stephanie, le 07/09/2026 : « je clique sur 14 et le petit calendrier s'en
   va... je clique sur 21 et le calendrier se met en haut de page. Ce n'est pas
   tres pratique. » Le selecteur du navigateur se fermait a chaque choix. Ce
   calendrier-ci est ECRIT DANS LA PAGE : il ne bouge pas, il ne se ferme pas. */
.choix-periode {
  margin-top: 8px; padding: 10px; border: 1px solid var(--bordure);
  border-radius: 10px; background: var(--fond-doux);
}
.tete-choix { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mois-choix {
  font-weight: 700; min-width: 130px; text-align: center;
  text-transform: capitalize;
}
.grille-mois {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  max-width: 300px;
}
.grille-mois .entete-jour {
  text-align: center; font-size: .68rem; font-weight: 700;
  color: var(--texte-doux); padding-bottom: 2px;
}
.jour-choix {
  border: 1px solid var(--bordure); background: var(--fond-carte);
  border-radius: 6px; padding: 5px 0; font-size: .8rem; cursor: pointer;
  color: var(--texte); font-family: inherit;
}
.jour-choix:hover { border-color: var(--accent); background: var(--accent-clair); }
.jour-choix.weekend { color: var(--texte-doux); }
/* Un jour deja pris par une periode : visible, mais toujours cliquable — deux
   periodes peuvent se toucher, et c'est a elle d'en juger. */
.jour-choix.deja {
  background: var(--accent-clair); border-color: var(--accent);
  font-weight: 700;
}
.jour-choix.debut {
  background: var(--accent); border-color: var(--accent-fonce);
  color: #fff; font-weight: 700;
}
/* Apres le premier clic, les jours qui peuvent finir la periode se detachent. */
.jour-choix.apres { border-color: var(--accent); }

/* --- LA FEUILLE D'EMARGEMENT ---------------------------------------------
   « Il faudrait qu'il y ait une feuille d'emargement, validee par Rudy »
   (07/09/2026). Elle s'imprime et se signe : colonnes etroites, cases nettes,
   et une colonne Signature laissee vide. */
table.tableau.emargement th,
table.tableau.emargement td {
  border: 1px solid var(--bordure); text-align: center; white-space: nowrap;
  padding: 3px 6px;
}
table.tableau.emargement th { background: var(--fond-doux); font-weight: 700; }
table.tableau.emargement .col-signature { min-width: 110px; }
table.tableau.emargement input[type="checkbox"] { width: 16px; height: 16px; }
table.tableau.emargement .champ-petit { min-width: 110px; }
/* Une journee validee est figee : on le voit avant de cliquer. */
table.tableau.emargement tr.valide td { background: var(--accent-clair); }
table.tableau.emargement tr.valide input { opacity: .8; }

@media print {
  table.tableau.emargement th,
  table.tableau.emargement td { border-color: #000; }
  table.tableau.emargement { font-size: 9pt; }
  table.tableau.emargement tr { page-break-inside: avoid; }
}

/* --- IMPRIMER UNE FEUILLE QUI VIT DANS UNE FENETRE ------------------------
   Stephanie, le 07/09/2026 : « j'ai voulu imprimer les feuilles d'emargement,
   je n'ai que la derniere page qui ressort ». La modale est en position fixe
   avec sa propre barre de defilement : l'imprimante ne voit que la portion
   affichee. On sort donc la feuille du flux de la fenetre, et elle devient le
   seul contenu de la page. */
.entete-impression { display: none; }

@media print {
  /* La feuille a ete deplacee a la racine du document par le bouton : il suffit
     donc de cacher ses freres. Plus aucun niveau intermediaire ne s'interpose —
     c'est ce qui rendait une page blanche. */
  body.imprime-emargement > *:not(.bloc-emargement) { display: none !important; }
  body.imprime-emargement .entete-impression {
    display: block; text-align: center; margin-bottom: 10px;
  }
  /* Les compteurs et les boutons sont de l'ecran, pas du papier. */
  body.imprime-emargement .grille-3,
  body.imprime-emargement .outils { display: none !important; }
  /* ⚠️ `.tableau-enveloppe` porte `overflow-x: auto` pour defiler a l'ecran. A
     l'impression, un conteneur qui defile COUPE ce qui depasse : la colonne
     Signature serait sortie tronquee. */
  body.imprime-emargement .tableau-enveloppe {
    overflow: visible !important; border: 0; border-radius: 0;
  }
  body.imprime-emargement table.tableau.emargement thead { display: table-header-group; }
  body.imprime-emargement table.tableau.emargement tr { page-break-inside: avoid; }
  body.imprime-emargement .emargement input[type="text"],
  body.imprime-emargement .emargement .champ {
    border: 0; border-bottom: 1px solid #000; background: none;
  }
}


/* --- L'AMBIANCE SOMBRE ----------------------------------------------------
   Stephanie, le 07/09/2026 : « le blanc creme, c'est trop clair pour mes yeux,
   mets-moi le fond en noir ».

   ⚠️ CE N'EST PAS LE SOMBRE DU MAC, qu'elle avait refuse le 05/09. Celui-la
   tombait sans qu'elle l'ait choisi et laissait des pans d'ecran illisibles.
   Celui-ci est une ambiance choisie, et dessinee :
     - un noir CHAUD (teinte brune, jamais un gris bleute) : elle a demande du
       cosy, ce n'est pas parce qu'on eteint la lumiere que ca change ;
     - un texte CREME et non blanc pur : le blanc pur sur du noir vibre et
       fatigue autant que du noir sur du blanc trop clair ;
     - les couleurs de statut RELEVEES, pas reprises telles quelles : un rouge
       ou un vert pastel disparait sur un fond sombre. */
:root[data-theme="sombre"] {
  --fond: #17150F;              /* noir chaud, une pointe de brun */
  --fond-carte: #1F1D16;
  --fond-doux: #2A271E;
  --texte: #EDE7DA;             /* creme, jamais #fff */
  --texte-doux: #9E9686;
  --bordure: #38342A;
  --accent: #9FCBB2;            /* son vert pastel, il tient sur le sombre */
  --accent-fonce: #B8DCC6;
  --accent-clair: #253028;
  --urgent: #F08D7C;
  --urgent-fond: #3B241F;
  --important: #E6B458;
  --important-fond: #3A2E19;
  --info: #8FC0DC;
  --ok: #8ED49C;
  --ok-fond: #1E3527;
  --ok-texte: #8ED49C;
  color-scheme: dark;
}
/* La barre de gauche se detache du fond au lieu de s'y fondre : sans cela on ne
   sait plus ou finit le menu et ou commence la page. */
:root[data-theme="sombre"] .barre-laterale {
  background: #121009;
  border-right: 1px solid var(--bordure);
}
:root[data-theme="sombre"] .marque-sous { opacity: .55; }
/* Les blocs de couleur du menu et les pastilles sont concus pour un fond clair.
   On les assombrit d'un voile plutot que de les redefinir un a un. */
:root[data-theme="sombre"] .nav-bloc { filter: brightness(.82) saturate(.9); }
:root[data-theme="sombre"] .pastille-rubrique,
:root[data-theme="sombre"] .badge { filter: brightness(.92); }
/* Un tableau raye reste lisible : la rayure s'eclaircit au lieu de s'assombrir. */
:root[data-theme="sombre"] table.tableau tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .022);
}
:root[data-theme="sombre"] .case-controle.etat-fait { color: #8ED49C; }
:root[data-theme="sombre"] .case-controle.etat-a-surveiller { color: #E6B458; }
:root[data-theme="sombre"] .case-controle.etat-probleme { color: #F08D7C; }
/* A l'impression on repasse en noir sur blanc, quelle que soit l'ambiance :
   personne n'imprime un registre sur fond noir. */
@media print {
  :root[data-theme="sombre"] {
    --fond: #fff; --fond-carte: #fff; --fond-doux: #f2f2f2;
    --texte: #000; --texte-doux: #444; --bordure: #999;
  }
}

/* ============ LE TABLEAU DU STOCK ============================================
   Stephanie, le 10/09/2026 : « il faut vraiment me le refaire ce truc. Ca ne me
   va pas du tout. Trop complique. »
   Une ligne par produit, les deux sites cote a cote, le total au bout. Les
   gestes ne sont plus poses sur la ligne : c'est le chiffre qui se clique. */
.table-stock { width: 100%; border-collapse: collapse; font-size: .92rem;
  margin-top: 4px; }
.table-stock th, .table-stock td { padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.table-stock th { background: var(--fond-doux); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux);
  font-weight: 600; }
.table-stock th.n, .table-stock td.n { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-stock tr:last-child td { border-bottom: none; }
.table-stock tr:hover td { background: var(--accent-clair); }
.table-stock .nom-produit { font-weight: 600; }

/* Le chiffre EST le bouton : c'est le seul endroit ou l'on agit sur un stock.
   Il reste un chiffre a l'oeil — pas un bouton dessine — mais il s'eclaire au
   survol pour dire qu'il se clique. */
.chiffre-stock { font: inherit; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--texte); background: none;
  border: 1px solid transparent; border-radius: 6px; padding: 2px 9px;
  cursor: pointer; min-width: 2.6rem; }
.chiffre-stock:hover, .chiffre-stock:focus-visible {
  border-color: var(--bordure); background: var(--fond-carte); }
/* La regle de couleur du 01/09/2026, inchangee : rouge a quatre et en dessous,
   vert a partir de cinq, pour les croquettes. */
.chiffre-stock.bas { color: var(--urgent); }
.chiffre-stock.bon { color: var(--ok); }

/* « jamais compte » : le chiffre est deduit des livraisons, il n'a jamais ete
   verifie en comptant les sacs. C'est ce qui fabriquait les sacs fantomes. */
.jamais-compte { font-size: .78rem; color: var(--urgent); font-style: italic;
  cursor: help; }
/* Un produit qui n'est pas tenu sur ce site : un tiret discret, pas un zero
   rouge. Le rouge reste reserve a un stock qui s'epuise reellement. */
.chiffre-stock.neant { color: var(--texte-doux); font-weight: 400; opacity: .55; }

/* ============ LES VACANCES SCOLAIRES SUR LE CALENDRIER DES STAGIAIRES ======
   Stephanie, le 11/09/2026 : « dans la colonne lundi, mardi [...] dimanche,
   les periodes de vacances scolaires, tout secteur confondu, en couleur ».
   La teinte est posee sur la colonne du NOM DU JOUR, jamais sur la case du
   stagiaire : les deux informations se lisent cote a cote sans se melanger.
   Un orange qui n'appartient pas a la palette des stagiaires, lisible sur le
   fond clair comme sur le fond sombre. Place APRES la regle du week-end :
   un samedi de vacances prend la couleur des vacances. */
/* ⚠️ LES VACANCES PASSENT AU GRIS (20/09/2026).
   Stephanie : « les periodes de vacances scolaires, c'est un orange, c'est
   moche. Tu me les mets en gris un peu plus fonce. Et tu me laisses la pastille
   rouge pour les jours feries. »
   Le gris a un autre merite : il ne peut plus entrer en concurrence avec la
   couleur d'un stagiaire, quelle qu'elle soit — c'etait le risque de l'orange,
   deja note ici en septembre. La pastille rouge des feries ne bouge pas. */
:root { --vacances-fond: #DCDCD5; --vacances-raie: #96968C; --vacances-texte: #45453E; }
/* Le sombre choisi explicitement, et le sombre « automatique » du systeme : les
   ambiances claires, elles, gardent la teinte du dessus. */
:root[data-theme="sombre"] {
  --vacances-fond: #3C3B34; --vacances-raie: #7E7D74; --vacances-texte: #E7E5DC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="pastel"]):not([data-theme="clair"]) {
    --vacances-fond: #3C3B34; --vacances-raie: #7E7D74; --vacances-texte: #E7E5DC; }
}
/* ⚠️ PLUS DE HACHURES. Stephanie, le 12/09/2026 : « la couleur n'est pas très
   jolie, tu aurais pu mettre quelque chose de plus joli pour les vacances
   scolaires. » Les rayures salissaient la case et donnaient un gris sale a
   distance. Un aplat doux, un filet franc a gauche : on voit la periode d'un
   coup d'oeil, et ca reste propre a l'impression. */
table.tableau.calendrier-annee .col-nomjour.vacances {
  background: var(--vacances-fond);
  border-left: 3px solid var(--vacances-raie);
  color: var(--vacances-texte); font-weight: 700; cursor: default;
}
/* LA BULLE DES VACANCES : ecrite par nous, pas par le navigateur. Elle dit le
   jour, la periode et ses dates zone par zone — « il faut que ce soit plus
   précis ». */
.bulle-vac {
  position: fixed; z-index: 60; max-width: 300px;
  background: var(--fond-carte); color: var(--texte);
  border: 1px solid var(--bordure); border-left: 4px solid var(--vacances-raie);
  border-radius: 10px; padding: 9px 12px; font-size: .82rem; line-height: 1.45;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18); pointer-events: none;
}
.bulle-vac .bv-jour { font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-doux); margin-bottom: 3px; }
.bulle-vac .bv-titre { font-weight: 700; margin-top: 4px; }
.bulle-vac .bv-ligne { color: var(--texte-doux); }

/* LES JOURS FERIES SUR LE CALENDRIER DES STAGIAIRES.
   « Tu les mets dans les calendriers du site » (12/09/2026). Ils ne prennent
   pas la place des vacances — un ferie tombe souvent EN vacances — ils se
   posent par-dessus : une pastille rouge dans le coin de la case. */
table.tableau.calendrier-annee .col-nomjour.ferie { position: relative; }
table.tableau.calendrier-annee .col-nomjour.ferie::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%; background: #C2453B;
}
.pastille-ferie { display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: #C2453B; vertical-align: -1px; }
.bulle-vac .bv-ferie { color: #C2453B; font-weight: 700; }

.pastille-vacances { display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; vertical-align: -2px; margin-right: 6px;
  background: var(--vacances-fond); border-left: 3px solid var(--vacances-raie); }
@media print {
  table.tableau.calendrier-annee .col-nomjour.vacances,
  .pastille-vacances { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* LE REGISTRE SANITAIRE DE LA PENSION — POINTER VITE (20/09/2026).
   Stephanie : « quand les chiens arrivent, on n'a pas forcement le temps de
   tout cliquer », et « il faut que les colonnes tiennent sur un ecran ».
   Les deux boutons du pointage sont colles l'un a l'autre : RAS large et
   colore, l'anomalie reduite a son pictogramme. On vise RAS sans regarder. */
/* ⚠️ DEUX CIBLES DE MEME TAILLE (20/09/2026).
   Stephanie : « le petit "attention" a cote du RAS, il est trop petit. Quand il
   y a du monde et tout, on n'a pas le temps de chercher ou on clique. »
   Les deux boutons font donc la meme largeur minimale et la meme hauteur, et
   l'anomalie porte la couleur « important » de l'application : on la trouve a
   la couleur, sans lire. Un pictogramme pale et etroit, a cote d'un bouton
   plein, c'etait une cible de quelques pixels. */
.pointage { display: inline-flex; gap: 5px; white-space: nowrap; }
.pointage .btn { padding: 7px 10px; font-size: .82rem; min-width: 56px;
  justify-content: center; }
.pointage .b-anomalie {
  min-width: 46px; font-size: 1.05rem; line-height: 1;
  color: var(--important);
  border-color: color-mix(in srgb, var(--important) 55%, transparent);
  background: var(--important-fond);
}
.pointage .b-anomalie:hover {
  border-color: var(--important);
  background: color-mix(in srgb, var(--important) 22%, var(--fond-carte));
}
/* Le nom du proprietaire s'ecrit en entier, sur une seule ligne. Les tres longs
   — « ATG MME ABADIE ( POUR LE COMPTE DE JOSETTE MILLET) » — passent a la ligne
   plutot que de forcer la colonne au-dela du raisonnable. */
.nom-proprio { display: inline-block; max-width: 34ch; }
.sejour-dates { white-space: nowrap; font-variant-numeric: tabular-nums; }
.obs-faite { white-space: nowrap; }

/* LA FEUILLE DU JOUR — L'ENTRETIEN DU SITE.
   Trois colonnes nommees au lieu d'une case « Remarque » muette (12/09/2026).
   Le poste tient la largeur, le produit respire, qui et quand restent discrets. */
table.tableau.tableau-entretien td,
table.tableau.tableau-entretien th { padding: 7px 10px; }
table.tableau.tableau-entretien td:first-child { font-weight: 600; }
table.tableau.tableau-entretien td:nth-child(2) { width: 34%; }
table.tableau.tableau-entretien td:nth-child(3),
table.tableau.tableau-entretien td:nth-child(4) { font-size: .82rem; white-space: nowrap; }
table.tableau.tableau-entretien input { width: 100%; padding: 4px 8px; font-size: .86rem; }
table.tableau.tableau-entretien tr.a-faire td:first-child {
  box-shadow: inset 3px 0 0 var(--urgent);
}
/* La ligne entiere bat tant qu'elle n'est pas pointee, comme avant. */
@keyframes reste-a-faire-ligne {
  0%, 100% { background: transparent; }
  50%      { background: var(--urgent-fond); }
}
table.tableau.tableau-entretien tr.a-faire td {
  animation: reste-a-faire-ligne 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  table.tableau.tableau-entretien tr.a-faire td { animation: none; }
}

/* LA GRILLE DES SOINS DES CHIENS, LISIBLE.
   « Les soins des chiens, c'est nul, faire plus lisible » (12/09/2026).
   En-tete collant, nom du chien fige a gauche, une ligne sur deux teintee. */
table.tableau.tableau-soins { font-size: .85rem; }
table.tableau.tableau-soins thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fond-doux); font-size: .7rem; line-height: 1.15;
  white-space: normal; padding: 8px 4px; vertical-align: bottom;
}
table.tableau.tableau-soins td { padding: 4px; border-bottom: none; }
table.tableau.tableau-soins tbody tr:nth-child(odd) td { background: var(--fond-doux); }
table.tableau.tableau-soins tbody tr:hover td { background: var(--accent-clair); }
/* Le nom reste sous les yeux quand on fait defiler les colonnes de cote. */
table.tableau.tableau-soins .col-chien {
  position: sticky; left: 0; z-index: 1;
  min-width: 11rem; background: var(--fond-carte);
  box-shadow: 1px 0 0 var(--bordure);
}
table.tableau.tableau-soins thead .col-chien { z-index: 3; background: var(--fond-doux); }
table.tableau.tableau-soins tbody tr:nth-child(odd) .col-chien { background: var(--fond-doux); }
table.tableau.tableau-soins tbody tr:hover .col-chien { background: var(--accent-clair); }
table.tableau.tableau-soins .pastille { width: 1.7rem; height: 1.7rem; font-size: .8rem; }

/* LA FEUILLE DU SITE, BATIMENT PAR BATIMENT (13/09/2026, selon le reglement).
   Une ligne pas due aujourd'hui (mensuelle deja faite, mois non concerne,
   action « a chaque sortie ») s'estompe : elle reste lisible et pointable,
   mais elle ne dispute pas l'attention a ce qui est a faire. */
table.tableau.tableau-entretien tr.pas-du td { opacity: .55; }
table.tableau.tableau-entretien tr.pas-du:hover td { opacity: 1; }
table.tableau.tableau-entretien td.col-frequence {
  font-size: .78rem; color: var(--texte-doux); white-space: normal; min-width: 7rem;
}
table.tableau.tableau-entretien td:first-child { white-space: normal; min-width: 14rem; }
table.tableau.tableau-entretien td:nth-child(3) { width: 26%; }
table.tableau.tableau-entretien td:nth-child(3) input::placeholder { font-size: .76rem; }
/* Due dans sa periode (mois, trimestre…) mais pas « du jour » : filet rouge,
   pas de battement. */
table.tableau.tableau-entretien tr.a-faire-periode td:first-child {
  box-shadow: inset 3px 0 0 var(--urgent);
}
table.tableau.tableau-entretien tr.a-faire-periode td:nth-child(2) {
  color: var(--urgent); font-weight: 600;
}

/* LA FEUILLE DU SITE — UNE LIGNE PAR SURFACE, NETTOYAGE ET DESINFECTION COTE A COTE
   (13/09/2026, « refaire le tableau »). L'etat vit sur la CASE, plus sur la
   ligne : le sol peut etre nettoye aujourd'hui et sa desinfection due ce mois. */
.carte-batiment { padding: 6px 12px 10px; }
.carte-batiment .sous-partie {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); margin: 12px 2px 4px; padding-bottom: 3px;
  border-bottom: 1px solid var(--bordure);
}
table.tableau.tableau-entretien.deux-actions td,
table.tableau.tableau-entretien.une-action td { vertical-align: top; animation: none; box-shadow: none; }
table.tableau.tableau-entretien .col-surface { width: 30%; font-weight: 600; white-space: normal; }
table.tableau.tableau-entretien.deux-actions td.cellule-action,
table.tableau.tableau-entretien.deux-actions td.cellule-vide { width: 35%; }
table.tableau.tableau-entretien td.cellule-action { border-radius: 6px; }
td.cellule-action .frequence { font-size: .72rem; color: var(--texte-doux); margin-bottom: 3px; }
td.cellule-action .saisie { display: flex; gap: 6px; align-items: center; }
td.cellule-action .saisie input { flex: 1; min-width: 0; padding: 3px 7px; font-size: .8rem; }
td.cellule-action .saisie input::placeholder { font-size: .72rem; }
td.cellule-action .trace { font-size: .7rem; margin-top: 2px; min-height: .9rem; }
td.cellule-action .pastille { width: 1.7rem; height: 1.7rem; flex: none; }
/* A faire aujourd'hui : la case bat. */
@keyframes case-a-faire { 0%, 100% { background: transparent; } 50% { background: var(--urgent-fond); } }
table.tableau.tableau-entretien td.cellule-due {
  animation: case-a-faire 1.4s ease-in-out infinite !important;
  box-shadow: inset 3px 0 0 var(--urgent) !important;
}
@media (prefers-reduced-motion: reduce) {
  table.tableau.tableau-entretien td.cellule-due { animation: none !important; }
}
/* Due dans sa periode (mois, trimestre…) : filet rouge, sans battement. */
table.tableau.tableau-entretien td.cellule-periode { box-shadow: inset 3px 0 0 var(--urgent) !important; }
td.cellule-periode .frequence { color: var(--urgent); font-weight: 700; }
/* Pas due (faite dans sa periode ailleurs, mois non concerne, a chaque sortie) : estompee. */
table.tableau.tableau-entretien td.cellule-pas-due { opacity: .55; }
table.tableau.tableau-entretien td.cellule-pas-due:hover { opacity: 1; }
td.cellule-faite .trace { color: var(--ok); }

/* Le bouton Supprimer d’un rendez-vous, au bout de sa ligne (14/09/2026). */
.liste-jour li .gestes-rdv,
.liste-alertes li .gestes-rdv { margin-left: auto; display: inline-flex; gap: 6px; flex: none; }
.gestes-rdv .btn { padding: 2px 8px; font-size: .72rem; white-space: nowrap; }

/* LA CROIX ROUGE DE CHAQUE NOTATION DU CALENDRIER (16/09/2026).
   « Il manque a chaque notation la croix rouge pour supprimer. » Elle reste
   discrete tant qu'on ne la touche pas, et s'ecrit en toutes lettres une fois
   armee : on ne supprime pas d'un seul clic. */
.gestes-rdv .croix-rdv {
  font-weight: 700; line-height: 1; padding: 2px 7px; font-size: .82rem;
}
.gestes-rdv .croix-rdv.arme { font-size: .72rem; padding: 2px 8px; }

/* MATIN ET SOIR : DEUX CASES PAR JOUR (14/09/2026). La case porte un petit
   tableau de deux lignes ; on neutralise ici les regles des colonnes du grand
   tableau, qui s'appliqueraient sinon aux cases imbriquees. */
table.tableau.tableau-entretien td.cellule-ms { padding: 4px 6px; vertical-align: top; }
table.tableau.tableau-entretien td.cellule-ms > .frequence { font-size: .72rem; color: var(--texte-doux); margin: 0 0 3px 4px; }
table.tableau.tableau-entretien table.ms { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
table.tableau.tableau-entretien table.ms td { width: auto !important; min-width: 0 !important;
  font-weight: normal; white-space: normal; font-size: inherit; padding: 4px 8px; }
table.tableau.tableau-entretien table.ms td .frequence { font-weight: 700; }
.carte-batiment .consigne-batiment { margin: 4px 0 8px; padding: 6px 10px; border-radius: 6px;
  font-size: .8rem; font-weight: 700; background: color-mix(in srgb, var(--urgent) 10%, transparent); }

/* UNE COULEUR PAR SECTEUR SUR LA FEUILLE DU JOUR (14/09/2026).
   « Tous les batiments ont le meme code couleur, on n'arrive pas a distinguer
   l'elevage, la pension, les annexes. » L'elevage et la pension reprennent les
   couleurs d'univers de Pierrelatte ; les annexes, la teinte neutre ;
   l'infirmerie et la quarantaine, le rouge. Tout passe par les jetons : chaque
   theme garde ses propres nuances. */
.t-elevage { --t: var(--u-elevage-sarl); }
.t-pension { --t: var(--u-pension); }
.t-commun { --t: var(--u-autre); }
.t-isolement { --t: var(--urgent); }
.bandeau-secteur.t-elevage, .bandeau-secteur.t-pension,
.bandeau-secteur.t-commun, .bandeau-secteur.t-isolement {
  color: var(--t); background: color-mix(in srgb, var(--t) 16%, transparent);
  font-size: .82rem;
}
.section-titre.titre-batiment { color: var(--t); margin-top: 16px; }
.carte.carte-batiment.t-elevage, .carte.carte-batiment.t-pension,
.carte.carte-batiment.t-commun, .carte.carte-batiment.t-isolement {
  border-left: 5px solid var(--t);
  background: color-mix(in srgb, var(--t) 5%, var(--fond-carte));
}
.carte-batiment.t-elevage .sous-partie, .carte-batiment.t-pension .sous-partie,
.carte-batiment.t-commun .sous-partie, .carte-batiment.t-isolement .sous-partie { color: var(--t); }

/* LES FEUILLES DU MOIS A IMPRIMER (14/09/2026) — une ligne par feuille, dans la
   couleur de son secteur. */
.feuilles-mois .ligne-feuille, .feuilles-mois .ligne-scan {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 6px 0;
  border-radius: 8px;
}
.feuilles-mois .ligne-feuille {
  border-left: 5px solid var(--t);
  background: color-mix(in srgb, var(--t) 6%, var(--fond-carte));
}
.feuilles-mois .ligne-scan + .ligne-scan { border-top: 1px solid var(--bordure); border-radius: 0; }
.feuilles-mois .nom { font-weight: 700; }
.feuilles-mois .detail { font-size: .76rem; color: var(--texte-doux); margin-top: 2px; }
.feuilles-mois .ligne-feuille > .btn, .feuilles-mois .ligne-scan > .btn { margin-left: auto; flex: none; }

/* L'ACCUEIL DE LA JOURNEE (16/09/2026) : « A faire aujourd'hui » et « A prevoir »
   en deux carres cote a cote, chacun une moitie de page — « pas la peine de les
   faire sur toute la largeur ». Sur un ecran etroit, l'un sous l'autre. */
/* ⚠️ DEUX COLONNES INEGALES (20/09/2026) : « la bulle "garder un oeil sur", tu
   la mets moins large ». Ce qui est a faire aujourd'hui occupe la place ; ce
   qu'on surveille tient dans une colonne plus etroite. Sous 46rem de large,
   elles repassent l'une sous l'autre. */
.accueil-journee { display: grid; grid-template-columns: minmax(22rem, 1.6fr) minmax(16rem, 1fr);
  gap: 14px; margin-bottom: 14px; max-width: 1150px; align-items: start; }
@media (max-width: 46rem) { .accueil-journee { grid-template-columns: 1fr; } }
.accueil-journee .carre-journee { margin: 0; padding: 12px 14px; }
.accueil-journee .carre-urgent { border-left: 4px solid var(--urgent); }
.accueil-journee .carre-prevoir { border-left: 4px solid var(--important); }
.accueil-journee .colonne-journee { display: flex; flex-direction: column; gap: 14px; }
.accueil-journee .carre-controle { border-left: 4px solid #8FCBA5; }

/* UNE CONSIGNE QUI ARRIVE (16/09/2026) : en haut a droite, au-dessus de tout,
   sans fermer la fenetre ouverte. */
.consignes-arrivees, #consignes-arrivees { position: fixed; top: 14px; right: 14px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; max-width: 26rem; }
.consigne-arrivee { background: #6D4C9F; color: #fff; padding: 12px 14px; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); animation: clignote 1.6s ease-in-out 3; }

/* Le DUERP, onglet de Documents (16/09/2026). */
.duerp { display: grid; gap: 10px; margin-top: 8px; }
.duerp-tete { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-end; }
.duerp-surtitre { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); }
.duerp-titre { font-size: 1.05rem; font-weight: 700; }
/* L'IDENTITE DE L'EMPLOYEUR (20/09/2026) : le DUERP se fait par employeur, et
   il y en a deux — l'EI d'Orange et la SARL de Pierrelatte. Le choix se fait
   dans la barre d'outils ; ces lignes-la partent a l'impression. */
.duerp-employeur { font-size: .78rem; line-height: 1.35; color: var(--texte-doux); margin-top: 3px; }
.duerp-employeur-raison { font-weight: 700; color: var(--texte); letter-spacing: .02em; }
.duerp-choix-employeur { display: inline-flex; align-items: center; gap: 4px; }
.duerp-choix-employeur select { font-size: .78rem; padding: 2px 4px; }
.duerp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.duerp-legende { display: flex; gap: 6px; }
table.duerp-table { font-size: .82rem; width: 100%; }
table.duerp-table td, table.duerp-table th { white-space: normal; vertical-align: top; }
table.duerp-table td.duerp-poste { font-weight: 700; font-size: .74rem; letter-spacing: .04em; background: color-mix(in srgb, var(--texte-doux) 7%, transparent); }
table.duerp-table td.duerp-risque { font-weight: 600; }
table.duerp-table tr.duerp-rupture td { border-top: 2px solid color-mix(in srgb, var(--texte-doux) 35%, transparent); }
.duerp-puces { margin: 0; padding-left: 1.1em; }
.duerp-puces li { margin: 0 0 2px; }
.duerp-niveau { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .74rem; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.duerp-niveau.niveau-faible { background: #D5EDD0; color: #2F6B26; }
.duerp-niveau.niveau-moyen { background: #FBE3B8; color: #8A5A0A; }
.duerp-niveau.niveau-important { background: #F6CACA; color: #A12626; }
.duerp-boutons { white-space: nowrap; }
@media print {
  .duerp-unites, .duerp-actions, .duerp-boutons, table.duerp-table th:last-child { display: none !important; }
  /* L'IMPRESSION DU DUERP (18/09/2026). Stephanie : « les couleurs ne
     s'affichent pas, et ce n'est pas une A4. » Le navigateur retire les fonds
     de couleur a l'impression sauf si on les lui demande, et le tableau, plus
     large qu'une page, etait reduit puis coupe. Une A4 a l'italienne, des
     colonnes fixes, et les fonds conserves. */
  /* Le fond et la hauteur d'ecran de l'application ajoutaient une page blanche
     a la fin de chaque impression. */
  html, body { min-height: 0 !important; height: auto !important; background: #fff !important; }
  #app, .zone-principale { min-height: 0 !important; display: block !important; }
  .duerp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.duerp-table { font-size: 7.4pt; width: 100%; table-layout: fixed; }
  table.duerp-table td, table.duerp-table th { padding: 2px 3px; word-break: break-word; }
  table.duerp-table thead { display: table-header-group; }
  table.duerp-table tr { break-inside: avoid; }
  .duerp-puces { padding-left: .9em; }
  /* Les pastilles de niveau restent lisibles meme sans les fonds. */
  .duerp-niveau { border: 1px solid currentColor; padding: 1px 4px; }
  .duerp-tete { margin-bottom: 4mm; }
  .duerp-legende { gap: 10px; }
}

/* Documents › Hygiène et sécurité (16/09/2026). */
.fiches-securite { display: grid; gap: 10px; margin-top: 8px; }
.fiche-tete { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-end; }
.morsure-procedure { border: 1px solid color-mix(in srgb, #4E7B78 40%, transparent); border-radius: 9px; padding: 8px 10px; display: grid; gap: 6px; }
.morsure-procedure summary { font-weight: 700; cursor: pointer; }
.morsure-bandeau { background: #4E7B78; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; padding: 5px 10px; border-radius: 4px; }
.morsure-cadre { background: color-mix(in srgb, #A7CBC8 45%, transparent); padding: 6px 10px; border-radius: 4px; font-size: .85rem; text-align: center; }
.morsure-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.morsure-carte { border: 1px solid #4E7B78; border-radius: 12px; padding: 8px 12px; font-size: .85rem; display: grid; gap: 2px; }
.lavage-mains { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 16px; align-items: start; }
.lavage-mains img { width: 100%; border: 1px solid color-mix(in srgb, var(--texte-doux) 25%, transparent); border-radius: 6px; }
@media (max-width: 800px) { .lavage-mains { grid-template-columns: 1fr; } }

.croquettes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.croquettes-produit { display: grid; gap: 4px; align-content: start; }
table.croquettes-table { font-size: .82rem; }
table.parcs-table { font-size: .85rem; }
table.parcs-table input { width: 100%; min-width: 8.5rem; }

.verif-bilan { display: grid; gap: 4px; margin-top: 10px; }
table.verif-table td:first-child { min-width: 16rem; }

/* Registre E/S de la pension (16/09/2026). */
table.registre-pension { font-size: .8rem; }
table.registre-pension th { text-align: center; }
table.registre-pension td, table.registre-pension th { white-space: normal; vertical-align: top; }
table.registre-pension tr.present td { background: color-mix(in srgb, var(--ok) 9%, transparent); }

/* Fiche du personnel, toute l'équipe (16/09/2026). */
.perso-bloc { border: 1px solid color-mix(in srgb, var(--texte-doux) 22%, transparent); border-radius: 9px; padding: 10px 12px; margin-top: 10px; break-inside: avoid; }
.perso-entete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.perso-deux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.perso-deux > div { overflow-x: auto; }
table.perso-table { font-size: .82rem; width: 100%; }
table.perso-table td, table.perso-table th { white-space: normal; vertical-align: top; }
.perso-vide { font-size: .82rem; padding: 4px 0; }
@media print { .perso-entete .duerp-actions, .perso-table .duerp-boutons { display: none !important; } }

.protocole-dk { border: 1px solid color-mix(in srgb, var(--texte-doux) 25%, transparent); border-radius: 9px; padding: 8px 12px; display: grid; gap: 6px; margin: 6px 0; font-size: .84rem; }
.protocole-etapes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.protocole-etapes > div:not(.protocole-delai) { flex: 1 1 180px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 6px; padding: 6px 8px; }
.protocole-delai { font-weight: 700; color: var(--texte-doux); white-space: nowrap; }

@media print { .perso-joindre { display: none !important; } }

.dossier-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; font-size: .86rem; }

.dossier-rubriques { display: grid; gap: 12px; }
.dossier-rubrique { display: grid; gap: 4px; }
.dossier-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .86rem; padding: 2px 0; border-bottom: 1px solid color-mix(in srgb, var(--texte-doux) 12%, transparent); }
.dossier-ligne > span:first-child { flex: 1 1 260px; }

.dossier-onglets { margin-bottom: 6px; }

/* RH › Pierrelatte (16/09/2026). */
.rh-sous-onglets { padding: 6px 8px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, transparent); margin: 6px 0 10px; }
.rh-groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rh-groupe { border: 1px solid color-mix(in srgb, var(--texte-doux) 22%, transparent); border-radius: 9px; padding: 8px 10px; display: grid; gap: 6px; align-content: start; }
.rh-groupe-noms { display: flex; flex-wrap: wrap; gap: 6px; }

.dossier-ligne[draggable="true"] { cursor: grab; }
.dossier-ligne .poignee { color: var(--texte-doux); cursor: grab; flex: none; }
.dossier-ligne .dossier-nom { flex: 1 1 240px; }
.dossier-ligne.glisse { opacity: .45; }
.dossier-onglets .bulle-vide { display: none; }
.glisse-en-cours .dossier-onglets .bulle-vide { display: inline-flex; opacity: .7; }
.glisse-en-cours .dossier-onglets button { outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); opacity: 1; }
.dossier-onglets .bulle-cible { background: var(--accent); color: #fff; transform: scale(1.06); }

/* Le chiffre des messages non lus, qui clignote (16/09/2026). */
.pastille-messages { animation: pastille-bat 1.1s ease-in-out infinite; }
@keyframes pastille-bat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .pastille-messages { animation: none; } }

.fil-messages { display: grid; gap: 8px; }
.fil-message.fil-moi { margin-left: 2rem; background: color-mix(in srgb, var(--accent) 8%, var(--fond-carte, transparent)); }

/* LA PROTECTION DES DOCUMENTS DE L'EQUIPE (16/09/2026) — voir app/protection.js */
.filigrane-protege { position: fixed; inset: 0; z-index: 9000; pointer-events: none; background-repeat: repeat; }
body.page-protegee #contenu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.page-protegee #contenu img { -webkit-user-drag: none; }
body.protege-floute #contenu { filter: blur(14px); transition: filter .1s; }
@media print {
  body.page-protegee * { visibility: hidden !important; }
  body.page-protegee::before { content: "Impression non autorisée"; visibility: visible; display: block; padding: 40px; font: 20px sans-serif; }
}
/* L'impression est bloquee pour l'equipe : pas de bouton qui ne sert a rien. */
body.page-protegee .btn-imprimer { display: none !important; }
/* Les lignes du DUERP a la couleur de leur niveau (17/09/2026), comme le PDF archive. */
.duerp-table tr.duerp-ligne-faible td:not(.duerp-poste) { background: #d6f0cc; }
.duerp-table tr.duerp-ligne-moyen td:not(.duerp-poste) { background: #ffdeb3; }
.duerp-table tr.duerp-ligne-important td:not(.duerp-poste) { background: #fac2bd; }

/* LE TABLEAU DE BORD REFAIT (20/09/2026).
   « Les alertes, avec un autre visuel : la c'est trop aligne, les couleurs
   sont bizarres, c'est pas tres joli. » La liste a puces alignait un badge
   colore et un texte sur toute la largeur — a quinze alertes, un mur. Chaque
   alerte devient une carte, la couleur passe dans un filet a gauche, et elles
   se rangent en colonnes selon la place. */
.cadre-bord { margin-bottom: 16px; }
.cadre-corps { display: block; }
.cadre-lien { cursor: pointer; transition: border-color .12s; }
.cadre-lien:hover { border-color: var(--accent); }

.alertes-cartes {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.alerte-carte {
  border: 1px solid var(--bordure); border-left: 4px solid var(--texte-doux);
  border-radius: 8px; padding: 9px 12px;
  background: color-mix(in srgb, var(--fond-carte) 92%, var(--bordure));
  font-size: .88rem; line-height: 1.34;
}
/* Le niveau ne s'ecrit plus, il se voit : un filet rouge, ambre ou vert. */
.alerte-urgent { border-left-color: var(--urgent); }
.alerte-important { border-left-color: var(--important); }
.alerte-info { border-left-color: var(--ok); }
.alerte-cliquable { cursor: pointer; }
.alerte-cliquable:hover { border-color: var(--accent); }
.alerte-texte { color: var(--texte); }
.alerte-fait { margin-top: 3px; font-size: .76rem; color: var(--ok); }

/* Le cadre des messages : qui a ecrit, quoi, et ou ca en est. */
.msg-ligne {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dashed var(--bordure); font-size: .88rem;
}
.msg-ligne:last-child { border-bottom: none; }
.msg-qui { font-weight: 700; white-space: nowrap; }
.msg-quoi { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-etat {
  white-space: nowrap; font-size: .74rem; color: var(--texte-doux);
  border: 1px solid var(--bordure); border-radius: 10px; padding: 1px 8px;
}
/* Un message sans reponse se voit : c'est le seul qui demande quelque chose. */
.msg-attente .msg-etat { color: var(--important); border-color: var(--important); }

/* LE CONTROLE OBLIGATOIRE, ANNONCE EN GRAND (20/09/2026).
   « Il faudrait le mettre un peu plus en gros : controle obligatoire,
   reglement sanitaire, DDPP. Que les gens le voient. » Ce n'est pas une
   routine interne, c'est ce qu'un controle verifie : le titre le dit. */
.titre-ddpp {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 3px solid var(--urgent);
}
.titre-ddpp-principal {
  font-size: 1.25rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--urgent);
}
.titre-ddpp-sous {
  font-size: .9rem; font-weight: 600; color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .08em;
}
/* La croix des messages : meme geste que dans le calendrier, en deux temps. */
.msg-ligne .croix-rdv { margin-left: 0; }
.msg-quoi { color: inherit; text-decoration: none; }
.msg-quoi:hover { text-decoration: underline; }
/* La croix des messages reprend l'allure de celle du calendrier, qui n'etait
   definie que sous `.gestes-rdv`. */
.msg-ligne .croix-rdv {
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--urgent); font: inherit; font-weight: 700; line-height: 1;
  padding: 2px 7px; font-size: .82rem; border-radius: 8px;
}
.msg-ligne .croix-rdv:hover { border-color: var(--urgent); }
.msg-ligne .croix-rdv.arme {
  font-size: .72rem; padding: 2px 8px; border-color: var(--urgent);
  background: color-mix(in srgb, var(--urgent) 12%, transparent);
}

/* LES ALERTES RANGEES PAR FAMILLE (20/09/2026) : elevage (production, soins),
   pension (entrees-departs, soins). Un tas melange oblige a trier de tete. */
.famille-alerte + .famille-alerte { margin-top: 14px; }
.famille-alerte-titre {
  font-size: .82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure); padding-bottom: 4px; margin-bottom: 8px;
}
.groupe-alerte + .groupe-alerte { margin-top: 10px; }
.groupe-alerte-titre {
  font-size: .8rem; font-weight: 700; color: var(--texte);
  margin: 0 0 5px 2px;
}


/* L'ALERTE DE 19 H, SUR SON BUREAU (20/09/2026).
   « Une alerte sur mon bureau en rouge qui clignote comme quoi le travail n'est
   pas fait. » Rouge plein, clignotante, tout en haut du tableau de bord — elle
   ne se pointe pas et ne se masque pas : elle s'eteint quand le travail est
   pointe « fait ». */
.alerte-19h {
  background: #D8453D;
  color: #fff;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
  animation: battement-19h 1.1s ease-in-out infinite;
}
@keyframes battement-19h {
  0%, 100% { background: #D8453D; }
  50% { background: #9B2A24; }
}
@media (prefers-reduced-motion: reduce) {
  .alerte-19h { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE CODE COULEUR DU TABLEAU DE BORD (20/09/2026)

   Stephanie : « je trouve qu'il n'y a pas assez de couleurs, des couleurs
   pastel [...] la mise en page n'est pas tres agreable a regarder. Moi, je me
   fie beaucoup au code couleur. »

   Une teinte par famille, pastel et constante : on reconnait la rubrique avant
   d'avoir lu le titre. Le filet de gauche des cartes continue, lui, de dire le
   NIVEAU (rouge, ambre, vert) — les deux informations ne se marchent pas
   dessus : la couleur de fond dit DE QUOI il s'agit, le filet dit si c'est
   urgent.
   ═══════════════════════════════════════════════════════════════════════════ */
.famille-alerte { border-radius: 10px; padding: 10px 12px 12px; }
.famille-alerte + .famille-alerte { margin-top: 12px; }
.famille-alerte-titre { border-bottom: 2px solid currentColor; opacity: .95; }

.f-elevage      { background: #EDF6E6; }
.f-elevage      .famille-alerte-titre { color: #4C7A2E; }
.f-pension      { background: #E4EFF8; }
.f-pension      .famille-alerte-titre { color: #2E6191; }
.f-reste        { background: #F3EFE6; }
.f-reste        .famille-alerte-titre { color: #7A6A48; }

/* Les sous-rubriques : un fond blanc casse pour detacher les cartes du fond
   pastel, et un petit point de couleur devant le titre. */
.groupe-alerte { background: color-mix(in srgb, var(--fond-carte) 88%, #fff);
  border-radius: 8px; padding: 8px 10px; }
.groupe-alerte-titre::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 7px; vertical-align: 1px;
  background: currentColor;
}
.g-production   .groupe-alerte-titre { color: #4C7A2E; }
.g-soins        .groupe-alerte-titre { color: #B07B1E; }
.g-sejours      .groupe-alerte-titre { color: #2E6191; }
.g-alimentation .groupe-alerte-titre { color: #8A5A2B; }
.g-identification .groupe-alerte-titre { color: #6B6252; }

/* Les cartes posees sur un fond pastel gardent leur blanc : c'est ce qui les
   detache. */
.famille-alerte .alerte-carte { background: var(--fond-carte); }

/* LE BANDEAU DE 19 H, REDUIT (20/09/2026).
   « Là, j'ai en gros le travail du jour qui n'a pas été fait, tu peux le
   réduire. » Une seule ligne : le titre, le nombre, le detail derriere. */
.alerte-19h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; margin-bottom: 12px; border-radius: 6px;
  font-size: .82rem;
}
.alerte-19h-titre { font-weight: 800; letter-spacing: .03em; font-size: .86rem; }
.alerte-19h-compte {
  background: rgba(255, 255, 255, .22); border-radius: 10px;
  padding: 1px 9px; font-weight: 700; white-space: nowrap;
}
.alerte-19h-detail {
  flex: 1 1 100%; opacity: .92; font-size: .76rem; line-height: 1.35;
}

@media (max-width: 720px) {
  .famille-alerte { padding: 8px 9px 10px; }
}

/* LE REGLEMENT SANITAIRE, DANS LA COLONNE DE SON SITE (20/09/2026).
   « Les controles obligatoires font partie du reglement sanitaire, c'est
   colonne de droite. » Ils gardent le rouge qui dit l'obligation, mais a
   l'echelle de la colonne : plus de bandeau pleine largeur. */
.f-ddpp { background: #FBEDEB; }
.f-ddpp .famille-alerte-titre {
  color: var(--urgent); font-size: .86rem; letter-spacing: .08em;
}
.g-controles .groupe-alerte-titre,
.g-parcs .groupe-alerte-titre { color: #9B2A24; }

/* Le bandeau « travail du jour non fait » vit maintenant DANS la colonne :
   il en prend la largeur et se cale au-dessus des familles. */
.cadre-corps > .alerte-19h { margin: 0 0 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LES TACHES : DES CARTES, PAS UN TABLEAU (20/09/2026)

   « Toutes ces rangees, tous ces numeros, ca m'agace deja d'entree. Quand je
   clique sur Tache, que ce soit agreable a lire, avec des couleurs pas
   agressives. »

   Une tache = une carte. Le titre se lit en premier ; l'echeance, le
   responsable et le dossier suivent en petit. La couleur du liseré dit
   l'urgence, en teintes douces — jamais de rouge vif sur fond blanc.
   ═══════════════════════════════════════════════════════════════════════════ */
.taches-groupe + .taches-groupe { margin-top: 18px; }
.taches-groupe-titre {
  display: flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux);
  margin: 0 0 8px 2px;
}
.taches-compte {
  font-size: .72rem; font-weight: 700; letter-spacing: 0;
  background: var(--fond-doux); color: var(--texte-doux);
  border-radius: 10px; padding: 1px 8px;
}
.tg-retard .taches-groupe-titre { color: #A8443C; }
.tg-retard .taches-compte { background: #F7E2DF; color: #A8443C; }
.tg-jour .taches-groupe-titre { color: #8A6A1F; }
.tg-jour .taches-compte { background: #F7EDD5; color: #8A6A1F; }

.taches-liste { display: flex; flex-direction: column; gap: 7px; }

.tache-carte {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-left: 4px solid #C9C3B4;
  border-radius: 9px; padding: 10px 12px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.tache-carte:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(22, 36, 29, .07);
}
/* Les trois priorites, en pastel : jamais criard, toujours reconnaissable. */
.tache-carte.p-urgent    { border-left-color: #D98A82; background: #FDF6F5; }
.tache-carte.p-important { border-left-color: #E0B86B; background: #FEFAF2; }
.tache-carte.p-normal    { border-left-color: #A8C4A0; }
/* Une echeance depassee fonce le liseré, sans repeindre la carte. */
.tache-carte.retard { border-left-color: #B3372B; }
.tache-carte.finie { opacity: .55; }
.tache-carte.finie .tache-titre { text-decoration: line-through; }

.tache-corps { flex: 1; min-width: 0; }
.tache-titre {
  font-weight: 600; font-size: .95rem; line-height: 1.32; color: var(--texte);
}
.tache-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 4px; font-size: .78rem; color: var(--texte-doux);
}
.tache-date { font-weight: 700; color: var(--texte); }
.tache-date.en-retard { color: #B3372B; }
.tache-etat {
  border: 1px solid var(--bordure); border-radius: 9px; padding: 0 7px;
  font-size: .72rem;
}
/* Le numero reste lisible mais ne se dispute plus la premiere place. */
.tache-num { margin-left: auto; font-size: .72rem; opacity: .6; white-space: nowrap; }

/* Les gestes n'apparaissent qu'au survol : la liste reste calme. */
.tache-gestes {
  display: flex; gap: 6px; align-items: center;
  opacity: 0; transition: opacity .12s;
}
.tache-carte:hover .tache-gestes,
.tache-carte:focus-within .tache-gestes { opacity: 1; }
@media (hover: none) { .tache-gestes { opacity: 1; } }

@media (max-width: 640px) {
  .tache-carte { flex-wrap: wrap; }
  .tache-gestes { opacity: 1; width: 100%; justify-content: flex-end; }
  .tache-num { margin-left: 0; }
}

/* LES SOMMES NE S'AFFICHENT PAS TOUTES SEULES (20/09/2026).
   « Dans Comptabilité, quand je clique dessus, je ne veux pas voir apparaître
   les sommes, c'est confidentiel. » L'ecran s'ouvre floute : on voit qu'il y a
   quelque chose, on ne lit rien. Un bouton decouvre, et tout se recouvre des
   que la fenetre perd le focus. */
.compta-barre { margin-bottom: 10px; align-items: center; }
.compta-enveloppe { position: relative; }
.compta-zone.masquee {
  filter: blur(7px);
  user-select: none; pointer-events: none;
}
.compta-voile {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 16px;
  background: color-mix(in srgb, var(--fond-carte) 55%, transparent);
  border-radius: 10px;
}
.compta-voile-texte {
  font-size: 1rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux);
}
.compta-voile-sous { font-size: .82rem; color: var(--texte-doux); }
/* ⚠️ `display: flex` BAT `[hidden]` (20/09/2026).
   « Quand je clique sur Afficher les montants, ça me les met, mais je ne peux
   rien faire, je suis bloquée. » Le voile restait la, invisible mais present :
   il couvrait l'ecran et avalait tous les clics. Une regle de plus grande
   specificite le retire vraiment. */
.compta-voile[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .compta-zone.masquee { filter: blur(7px); } }


/* LE BOUTON « ENTRER », SUR LA PAGE DE CONNEXION (22/09/2026).
   Stephanie : « la barre Entrer, tu as changé la couleur, pourquoi ? »
   Parce que j'avais rattache `.btn-principal` au style des boutons de
   l'application, qui prennent SA couleur — sauf qu'ici elle n'est pas encore
   connue : le theme arrive avec le compte, apres identification. Le bouton
   affichait donc le vert par defaut du logiciel, qui n'est pas le sien.
   Une page de connexion ne peut pas deviner les gouts de qui n'a pas encore
   dit son nom : elle reste sobre, en couleurs fixes, dans les deux themes. */
/* LA COULEUR DE LA CARRIERE (22/09/2026).
   Stephanie : « le gris, je trouve ca fade. Essaye de me trouver une couleur
   qui favorise la carriere. »
   En feng shui, la carriere est le secteur Nord, element EAU : noir et bleus
   profonds. Le gris, lui, releve du Metal — qui nourrit l'Eau dans le cycle
   producteur : il n'etait donc pas faux, seulement terne.
   On prend l'Eau elle-meme, dans un bleu canard sombre plutot que le bleu
   d'entreprise que tout le monde emploie. Contraste avec le blanc : 9,16 —
   tres au-dessus des 4,5 exiges, y compris en plein soleil sur un telephone.
   Couleurs fixes : la page de connexion ne connait pas encore le theme. */
.connexion .btn-principal,
.connexion .btn-principal:hover {
  background-image: none;
  background-color: #0E4F5C;
  border-color: #0E4F5C;
  color: #fff;
  box-shadow: 0 1px 3px rgba(14, 79, 92, .35);
}
.connexion .btn-principal:hover { background-color: #0A3B45; }

/* =========================================================================
   LES ECRANS ETROITS — TELEPHONES ET PETITES TABLETTES
   Ces regles viennent EN DERNIER, volontairement : a specificite egale, la
   derniere gagne. Placees plus haut, elles se faisaient annuler par des
   regles ecrites apres elles.
   ========================================================================= */

/* ============ LE CALENDRIER SUR UN TELEPHONE (22/09/2026) =================
   Stephanie, le jour de la mise en ligne : « le tableau est illisible ».
   Sept colonnes dans 375 pixels, ca fait 44 pixels par jour : chaque
   evenement etait coupe a « 1 d… », « 3 a… ». On voyait qu'il se passait
   quelque chose sans pouvoir lire quoi.

   La grille devient donc une LISTE : un jour par ligne, sur toute la largeur,
   et les evenements s'ecrivent en entier. C'est ce que font les agendas de
   telephone, et pour une bonne raison — on lit de haut en bas sur un ecran
   etroit, pas de gauche a droite.

   Les jours sans rien restent presents, mais reduits a une ligne : elle doit
   pouvoir taper dessus pour ouvrir la journee et ajouter quelque chose.
   Au-dessus de 820 px, rien ne change : la grille du mois reste la grille. */
@media (max-width: 820px) {
  .cal-entete { display: none; }
  .cal-grille { display: block; }

  .cal-jour {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px 10px;
    min-height: 0; margin-bottom: 4px; padding: 7px 9px;
  }
  /* Les jours des mois voisins n'ont rien a faire dans une liste. */
  .cal-jour.hors { display: none; }

  /* La date a gauche, en colonne etroite et fixe : l'oeil descend le long
     des numeros sans avoir a les chercher. */
  .cal-jour .tete-jour {
    flex: 0 0 3.4rem; display: flex; align-items: baseline; gap: 5px;
    padding-top: 2px;
  }
  .cal-jour .num { font-size: 1rem; }

  /* Les evenements prennent la place restante et s'ecrivent EN ENTIER. */
  .cal-jour .cal-ev {
    flex: 1 1 calc(100% - 4.4rem);
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.35; padding: 4px 8px; margin: 0;
  }
  /* Le deuxieme evenement et les suivants se placent sous le premier, aligne
     avec lui et non sous la date. */
  .cal-jour .cal-ev ~ .cal-ev { margin-left: 4.4rem; }
}