/* =========================================================================
   FERME — la feuille de style
   -------------------------------------------------------------------------
   Direction retenue : D1 « Familier » du handoff
   (Redesign dashboard administration épuré / design_handoff_ferme_avicole) :
   anneau de ponte, barre du bas à bouton central, conseils en bulles,
   palette P5 « coquille & charbon », Space Grotesk pour les chiffres.

   CE QUE CETTE REFONTE CHANGE, ET POURQUOI

       LE TEXTE GROSSIT. Plus rien en dessous de 18 px : l'application se
       lit à bout de bras, dans un poulailler, en plein soleil, parfois par
       quelqu'un qui voit mal. Les anciens 11-13 px des légendes étaient
       lisibles sur un écran de bureau et illisibles là-bas.

       ON TOUCHE AVEC LE POUCE. Toute cible fait 48 px au minimum, 56 à
       68 px pour les gestes principaux. Les liens-texte de 13 px sont
       devenus des lignes de 66 px.

       LE SENS PASSE PAR TROIS SIGNAUX : une couleur, une icône, un mot.
       Jamais la couleur seule — un daltonien, un écran délavé ou une
       impression en noir et blanc doivent donner la même information.

       LE DÉCOR DISPARAÎT. Plus de grain, plus de halos, plus de photo de
       bandeau : le fond est un aplat, les cartes se distinguent par leur
       propre teinte (#FFF9F0 sur #EDE6DA) et non par une ombre. Ce qui
       reste à l'écran est ce qui porte une information.

   LES TROIS FAMILLES

       SPACE GROTESK   les chiffres, et eux seuls. Serrés (-0,03 em), ils
                       tiennent en 66 px au centre de l'anneau.
       SOURCE SANS 3   les phrases. 18-19 px, interligne 1,45.
       MANROPE 800     les titres d'écran, jamais autre chose.

   Les trois sont servies depuis static/polices/ : une application qui se
   dit hors ligne ne peut pas dépendre de fonts.googleapis.com.
   ========================================================================= */

/* ---------------------------------------------------------- LES POLICES */
@font-face{font-family:"Space Grotesk"; src:url(/static/polices/space-grotesk-latin.woff2) format("woff2");
           font-weight:500 700; font-style:normal; font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
             U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
             U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk"; src:url(/static/polices/space-grotesk-latin-ext.woff2) format("woff2");
           font-weight:500 700; font-style:normal; font-display:swap;
           unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
             U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
             U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3"; src:url(/static/polices/source-sans-3-latin.woff2) format("woff2");
           font-weight:400 700; font-style:normal; font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
             U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
             U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3"; src:url(/static/polices/source-sans-3-latin-ext.woff2) format("woff2");
           font-weight:400 700; font-style:normal; font-display:swap;
           unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
             U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
             U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope; src:url(/static/polices/manrope-latin.woff2) format("woff2");
           font-weight:600 800; font-style:normal; font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
             U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
             U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope; src:url(/static/polices/manrope-latin-ext.woff2) format("woff2");
           font-weight:600 800; font-style:normal; font-display:swap;
           unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
             U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
             U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ----------------------------------------------------------- LES TOKENS */
/* Palette P5 du handoff. Les anciens noms (--terre, --olive, --or…) sont
   gardés comme alias : quinze fichiers de script posent des couleurs en
   ligne avec eux, et les renommer partout aurait été du risque sans
   bénéfice. Ce sont maintenant les couleurs de la nouvelle palette. */
:root{
  --papier:#EDE6DA;          /* fond de l'application */
  --panneau:#FFF9F0;         /* cartes, listes, barres */
  --creux:#F2E9DC;           /* surfaces enfoncées, bulles, touches douces */
  --encre:#1E1B18;           /* texte principal */
  --brun:#4A443C;            /* texte secondaire */
  --taupe:#6B6257;           /* texte tertiaire, états éteints */

  --action:#7A4A18;          /* boutons principaux, onglet actif */
  --action-texte:#FFF9F0;
  --argent:#2F6B45;          /* argent, bon jour, coches */
  --argent-fond:#DCE6DC;
  --argent-texte:#1F4E32;
  --aliment:#9A5B0B;         /* sac d'aliment, budget, échéances */
  --ponte:#B8763A;           /* œuf, barres — JAMAIS du texte */
  --alerte:#A8331E;
  --alerte-fond:#F7E4DF;
  --standard:#C4B6A0;        /* courbe du sélectionneur */
  --piste:#E3DACB;           /* piste de l'anneau et des jauges */
  --sable:#E0C9A6;           /* icône sur pastille charbon */

  --trait:#EFE6D7;           /* filet entre deux lignes */
  --trait-clair:#F2E9DC;
  --grille:#E3DACB;
  --bord:#D8CDBB;
  --gris-clair:#E3DACB;

  /* alias de compatibilité — mêmes rôles, couleurs de la nouvelle palette */
  --terre:#B8763A; --terre-sombre:#A8331E; --terre-claire:#E0C9A6;
  --terre-pale:#EDD9BC; --or:#9A5B0B;
  --olive:#7A4A18; --olive-clair:#2F6B45; --olive-pale:#DCE6DC;
  --sable-1:#E3DACB; --sable-2:#D8CDBB; --sable-3:#C4B6A0;

  --titre:Manrope,"Source Sans 3",system-ui,sans-serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --chiffres:"Space Grotesk","Source Sans 3",system-ui,sans-serif;
  --serif:var(--chiffres);   /* alias : le grand nombre n'est plus un serif */

  --rail:272px;              /* la barre latérale, sur ordinateur */
  --marge:34px;              /* retrait du contenu */
  --marge-d:34px;
  --barre:84px;              /* la barre du bas, sur téléphone */
  --r-carte:22px; --r-touche:14px; --r-bandeau:16px; --r-pilule:24px;
}

@media (max-width:1100px){ :root{ --marge:24px; --marge-d:24px } }
@media (max-width:700px){ :root{ --marge:18px; --marge-d:18px } }

/* Le thème sombre du handoff : mêmes rôles, luminance inversée. Il sert au
   ramassage de nuit, lampe frontale allumée. */
:root[data-theme="dark"]{
  --papier:#1E1B18; --panneau:#2B2724; --creux:#332E2A;
  --encre:#F0E9DE; --brun:#D6CCBE; --taupe:#A99C8C;
  --action:#E0C9A6; --action-texte:#1E1B18;
  --argent:#8FB894; --argent-fond:#2B3A2E; --argent-texte:#CFE3D2;
  --aliment:#D9A24A; --ponte:#D08A4A; --alerte:#F09380;
  --alerte-fond:#3A2622; --standard:#6E6455; --piste:#3A342E; --sable:#E0C9A6;
  --trait:#3A342E; --trait-clair:#332E2A; --grille:#3A342E; --bord:#4A423A;
  --gris-clair:#3A342E;
  --terre:#D08A4A; --terre-sombre:#F09380; --terre-claire:#8A6A18;
  --terre-pale:#3A342E; --or:#D9A24A;
  --olive:#E0C9A6; --olive-clair:#8FB894; --olive-pale:#2B3A2E;
  --sable-1:#3A342E; --sable-2:#4A423A; --sable-3:#6E6455;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#1E1B18; --panneau:#2B2724; --creux:#332E2A;
    --encre:#F0E9DE; --brun:#D6CCBE; --taupe:#A99C8C;
    --action:#E0C9A6; --action-texte:#1E1B18;
    --argent:#8FB894; --argent-fond:#2B3A2E; --argent-texte:#CFE3D2;
    --aliment:#D9A24A; --ponte:#D08A4A; --alerte:#F09380;
    --alerte-fond:#3A2622; --standard:#6E6455; --piste:#3A342E; --sable:#E0C9A6;
    --trait:#3A342E; --trait-clair:#332E2A; --grille:#3A342E; --bord:#4A423A;
    --gris-clair:#3A342E;
    --terre:#D08A4A; --terre-sombre:#F09380; --terre-claire:#8A6A18;
    --terre-pale:#3A342E; --or:#D9A24A;
    --olive:#E0C9A6; --olive-clair:#8FB894; --olive-pale:#2B3A2E;
    --sable-1:#3A342E; --sable-2:#4A423A; --sable-3:#6E6455;
  }
}

/* -------------------------------------------------------------- LA BASE */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--sans); font-size:18px; font-weight:400; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-family:var(--titre); font-weight:800; line-height:1.14;
         letter-spacing:-.02em}
a{color:var(--action); text-decoration:none; font-weight:600}
a:hover{color:var(--argent)}
p{margin:0; text-wrap:pretty}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--action); outline-offset:2px}

/* ==================================================== LA COQUE ==========
   Sur ordinateur : une barre latérale fixe à gauche, le contenu à droite.
   Sur téléphone : pas de barre latérale, une barre du bas à cinq places
   dont le bouton central ouvre la saisie depuis n'importe où (c'est la
   garantie « aucune fonction à plus de deux touches »).
   ======================================================================== */
.appli{display:flex; align-items:stretch; min-height:100vh}
.colonne{flex:1 1 560px; min-width:0; display:flex; flex-direction:column}
.corps{flex:1; padding-bottom:40px}

/* ---- la barre latérale ---- */
/* LE NOM COMPTE. Cette barre s'est d'abord appelée « rail » — comme le
   rail des arcs de vie, qui existait depuis la v2. Les deux règles se
   mélangeaient et les arcs s'affichaient vides : une barre latérale en
   colonne écrasait les segments de couleur. */
.barre-cote{flex:0 0 var(--rail); width:var(--rail); background:var(--panneau);
      padding:22px 16px; display:flex; flex-direction:column; gap:22px;
      position:sticky; top:0; align-self:flex-start; height:100vh}
.barre-cote .marque{display:flex; align-items:center; gap:11px; min-width:0}
.barre-cote .marque svg{flex:0 0 auto; width:26px; height:32px}
.barre-cote .marque b{display:block; font-family:var(--titre); font-size:21px;
                font-weight:800; letter-spacing:-.02em; line-height:1.1;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barre-cote .marque span{display:block; font-size:16px; color:var(--taupe);
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu{display:flex; flex-direction:column; gap:3px; overflow-y:auto;
      scrollbar-width:thin}
.menu a{display:flex; align-items:center; gap:11px; min-height:52px;
        padding:0 13px; border-radius:var(--r-touche); color:var(--encre);
        font-size:18px; font-weight:600; white-space:nowrap}
.menu a svg{flex:0 0 auto; width:24px; height:24px; fill:none;
            stroke:var(--brun); stroke-width:2.2; stroke-linecap:round;
            stroke-linejoin:round}
.menu a:hover{background:var(--creux); color:var(--encre)}
.menu a.actif{background:var(--creux); color:var(--action); font-weight:700}
.menu a.actif svg{stroke:var(--action)}
.menu a .compte{margin-left:auto; min-width:26px; height:26px; padding:0 7px;
                border-radius:13px; background:var(--alerte);
                color:var(--panneau); font-family:var(--chiffres);
                font-size:15px; font-weight:700; display:grid;
                place-items:center}
.menu a .compte:empty{display:none}
.barre-cote .bas{margin-top:auto; display:flex; flex-direction:column; gap:10px}

/* ---- l'en-tête du contenu ---- */
.entete{display:flex; align-items:flex-end; justify-content:space-between;
        gap:14px; flex-wrap:wrap; padding:22px var(--marge-d) 14px var(--marge)}
.entete .texte{min-width:0; display:flex; flex-direction:column; gap:3px}
.entete h1{font-size:clamp(23px,2.5vw,30px)}
.datelle{font-size:17px; font-weight:600; color:var(--taupe)}
.entete .actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap}

/* La pastille hors ligne / en ligne : couleur + icône + mot, toujours les
   trois. Elle ne disparaît jamais — savoir si la saisie est partie ou
   gardée sur le téléphone fait partie du travail. */
.pastille-reseau{display:inline-flex; align-items:center; gap:7px;
                 min-height:44px; padding:0 13px; border-radius:10px;
                 background:var(--argent-fond); color:var(--argent-texte);
                 font-size:18px; font-weight:700; white-space:nowrap}
.pastille-reseau svg{width:20px; height:20px; fill:none; stroke:var(--argent);
                     stroke-width:2.4; stroke-linecap:round}
.pastille-reseau.hors{background:var(--creux); color:var(--brun)}
.pastille-reseau.hors svg{stroke:var(--brun)}

.periode{display:flex; align-items:center; gap:4px; padding:4px;
         border-radius:var(--r-pilule); background:var(--creux)}
.periode span{min-height:40px; padding:0 14px; border-radius:20px;
              display:inline-flex; align-items:center; font-size:17px;
              font-weight:600; color:var(--brun); cursor:pointer}
.periode span.actif{background:var(--panneau); color:var(--action);
                    font-weight:700}

.sr{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}

.compte-barre{display:flex; align-items:center; gap:10px}
.compte-barre .qui{display:block; text-align:right; line-height:1.2}
.compte-barre .qui b{display:block; font-size:17px; font-weight:700}
.compte-barre .qui span{display:block; font-size:15px; color:var(--taupe)}

/* ---- la barre du bas, téléphone ---- */
.onglets{display:none}
@media (max-width:1000px){
  .appli{display:block}
  .barre-cote{display:none}
  .corps{padding-bottom:calc(var(--barre) + 34px)}
  .onglets{display:grid; position:fixed; left:0; right:0; bottom:0; z-index:90;
           height:var(--barre); background:var(--panneau);
           grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center;
           padding-bottom:env(safe-area-inset-bottom)}
  .onglets button{display:flex; flex-direction:column; align-items:center;
                  gap:2px; min-height:62px; padding:0 2px; border:0;
                  border-radius:0; background:transparent; color:var(--brun);
                  font-size:18px; font-weight:600; letter-spacing:-.01em}
  .onglets button svg{width:24px; height:24px; fill:none; stroke:var(--brun);
                      stroke-width:2.2; stroke-linecap:round;
                      stroke-linejoin:round}
  .onglets button.actif{color:var(--action); font-weight:700}
  .onglets button.actif svg{stroke:var(--action)}
  /* le bouton central : il dépasse de la barre, cerclé du fond de page */
  .onglets .central{display:grid; place-items:center}
  .onglets .central button{width:68px; height:68px; margin-top:-26px;
                           border:4px solid var(--papier); border-radius:34px;
                           background:var(--action); min-height:68px}
  .onglets .central button svg{width:30px; height:30px;
                               stroke:var(--action-texte); stroke-width:2.6}
  .entete{padding-top:16px}
}

.pied{padding:26px var(--marge-d) 40px var(--marge); font-size:17px;
      color:var(--taupe)}

/* ==================================================== LE CONTENU ======== */
.section{padding-left:var(--marge); padding-right:var(--marge-d);
         max-width:1180px}
.section.decale, .section.deborde{padding-left:var(--marge)}
.vue{display:none}
.vue.ouverte{display:block}

.section-titre{display:flex; align-items:flex-end; gap:12px 26px;
               flex-wrap:wrap; margin-bottom:12px}
.section-titre h2{font-size:clamp(21px,2.2vw,26px); max-width:30ch}
.section-titre .sous{font-size:18px; color:var(--taupe)}
.section-titre p{max-width:62ch; font-size:18px; color:var(--brun)}
.section-titre .gauche{min-width:0; flex:1; display:flex;
                       flex-direction:column; gap:6px}
.sous-titre{font-family:var(--titre); font-size:19px; font-weight:700;
            margin:18px 0 8px}
.prose{max-width:60ch; font-size:18px; line-height:1.5; color:var(--brun)}
.mention{font-size:17px; color:var(--taupe)}
.eyebrow{font-size:17px; font-weight:700; color:var(--taupe)}
.legende{font-size:17px; font-weight:600; color:var(--taupe)}
.aide{color:var(--brun); font-size:18px; line-height:1.45; max-width:62ch;
      margin-bottom:14px}
.aide:last-child{margin-bottom:0}
.note{font-size:17px; line-height:1.45; color:var(--brun); max-width:62ch;
      margin-top:12px; padding:13px 15px; border-radius:var(--r-bandeau);
      background:var(--creux)}
.encart{background:var(--argent-fond); color:var(--argent-texte);
        border-radius:var(--r-bandeau); padding:15px 16px; font-size:18px;
        line-height:1.45; margin-top:14px}
.encart b{font-weight:700}

/* Les chiffres qui portent l'écran. */
.enorme{font-family:var(--chiffres); font-weight:700;
        font-size:clamp(46px,9vw,66px); line-height:1; letter-spacing:-.04em}
.enorme.vide{font-family:var(--titre); font-weight:800;
             font-size:clamp(28px,5vw,38px); letter-spacing:-.02em}
.enorme-unite{font-size:19px; font-weight:700; color:var(--brun)}
.grand{font-family:var(--chiffres); font-weight:700;
       font-size:clamp(34px,4.4vw,50px); letter-spacing:-.03em}
.moyen{font-family:var(--chiffres); font-weight:700;
       font-size:clamp(26px,3vw,34px); letter-spacing:-.03em}

/* ---- la carte, brique de tous les écrans ---- */
.bloc{background:var(--panneau); border-radius:var(--r-carte);
      padding:18px; margin-bottom:16px}
.bloc > h2{font-size:21px; margin-bottom:6px}
.bloc.encadre{background:var(--creux)}
.panneau{background:var(--panneau); border-radius:var(--r-carte); padding:18px}
.panneau > h2{font-size:21px}
.panneau .prose{font-size:18px; margin-top:8px}

.grille{display:grid; gap:16px}
.grille > *{min-width:0}
@media (min-width:900px){
  .grille.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille.large-etroit{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .grille.etroit-large{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
}

/* ---- les quatre indicateurs ---- */
.mesures{display:grid; gap:12px;
         grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.mesure{background:var(--panneau); border-radius:var(--r-carte);
        padding:16px 17px}
.mesure b{display:block; font-family:var(--chiffres); font-size:32px;
          font-weight:700; line-height:1.05; letter-spacing:-.03em;
          font-variant-numeric:tabular-nums}
.mesure span{display:block; font-size:18px; font-weight:700;
             color:var(--brun); margin-top:6px}
.mesure em{display:block; font-style:normal; font-size:17px;
           color:var(--taupe); margin-top:3px}
.mesure.terre b{color:var(--aliment)}
.mesure.vert b{color:var(--argent)}
.mesure.rouge b{color:var(--alerte)}
.mesure.or b{color:var(--aliment)}
.mesure em.rouge{color:var(--alerte); font-weight:700}
.mesure em.vert{color:var(--argent); font-weight:700}
.vert{color:var(--argent)} .rouge{color:var(--alerte)}
.terre{color:var(--aliment)} .or{color:var(--aliment)}
.faible{color:var(--taupe)} .fort{font-weight:700}

/* ---- une liste de lignes touchables ---- */
.liste{background:var(--panneau); border-radius:var(--r-carte);
       overflow:hidden; margin-top:12px}
.liste .ligne{display:flex; align-items:center; gap:13px; min-height:66px;
              padding:10px 17px; border-top:1px solid var(--trait)}
.liste .ligne:first-child{border-top:0}
.liste .g{flex:1; min-width:0}
.liste .g b{display:block; font-size:19px; font-weight:600}
.liste .g span{display:block; font-size:17px; color:var(--brun);
               line-height:1.4}
.liste .d{font-family:var(--chiffres); font-size:19px; font-weight:700;
          text-align:right; white-space:nowrap;
          font-variant-numeric:tabular-nums}
.liste .d i{display:block; font-style:normal; font-family:var(--sans);
            font-size:17px; font-weight:400; color:var(--taupe)}
.liste .ligne.cliquable, .liste .ligne[role="button"]{cursor:pointer}
.liste .ligne.cliquable:hover{background:var(--creux)}

.releve{display:flex; flex-direction:column; background:var(--panneau);
        border-radius:var(--r-carte); overflow:hidden}
.releve .ligne{display:flex; justify-content:space-between; align-items:center;
               gap:14px; min-height:62px; padding:10px 17px;
               border-top:1px solid var(--trait)}
.releve .ligne:first-child{border-top:0}
.releve .ligne span{font-size:18px; font-weight:600; color:var(--brun)}
.releve .ligne b{font-family:var(--chiffres); font-size:22px; font-weight:700;
                 font-variant-numeric:tabular-nums}
.releve .vert b{color:var(--argent)}
.releve .rouge b{color:var(--alerte)}

/* ---- les tableaux ---- */
/* UN TABLEAU LARGE DÉFILE, IL NE POUSSE PAS LA PAGE.

   Mesuré par verifier-parcours.py : l'écran des réglages débordait de
   186 px en 390 px de large, sur les quatre parcours. Le cadre avait bien
   son `overflow-x:auto`, mais rien ne l'empêchait de s'élargir avec son
   contenu — c'est le piège habituel : une boîte dont le contenu a une
   largeur minimale (ici `white-space:nowrap` sur les en-têtes, soit
   621 px) grandit jusqu'à elle si aucun ancêtre ne la contraint.

   `max-width:100%` sur le cadre et `min-width:0` sur les conteneurs
   règlent les deux bouts. Le téléphone n'est pas un bonus au Sénégal :
   c'est l'appareil. */
.table-cadre{overflow-x:auto; overflow-y:hidden; background:var(--panneau);
             border-radius:var(--r-carte); padding:2px 4px;
             max-width:100%}
.section, .bloc, .vue{min-width:0}
table.donnees{width:100%; border-collapse:collapse; font-size:18px}
table.donnees th{padding:14px 13px; text-align:left; font-size:17px;
                 font-weight:700; color:var(--brun); white-space:nowrap;
                 border-bottom:1px solid var(--trait)}
table.donnees th.triable{cursor:pointer}
table.donnees td{padding:13px; border-top:1px solid var(--trait)}
table.donnees tbody tr:first-child td{border-top:0}
table.donnees .n{text-align:right; font-variant-numeric:tabular-nums;
                 font-family:var(--chiffres); font-weight:600;
                 white-space:nowrap}
table.donnees .fort{font-weight:700}
table.donnees tr.total td{border-top:2px solid var(--bord); font-weight:700}
table.donnees tr.cliquable{cursor:pointer}
table.donnees tbody tr:hover{background:var(--creux)}

.pagination{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
            padding-top:12px}
.pagination .info{font-size:17px; color:var(--taupe)}
.pagination .fleches{margin-left:auto; display:flex; gap:8px}
.pagination .fleches span{display:inline-flex; align-items:center;
                          min-height:48px; padding:0 15px;
                          border-radius:var(--r-touche); background:var(--creux);
                          font-size:18px; font-weight:700; cursor:pointer}
.pagination .fleches span:hover{background:var(--bord)}

/* ---- les pastilles d'état : couleur + mot, sur un fond teinté ---- */
.puce{display:inline-flex; align-items:center; gap:6px; min-height:32px;
      padding:0 11px; border-radius:16px; background:var(--creux);
      color:var(--brun); font-size:16px; font-weight:700; white-space:nowrap}
.puce.bon, .puce.livree{background:var(--argent-fond); color:var(--argent-texte)}
.puce.grave, .puce.impaye, .puce.annulee{background:var(--alerte-fond);
                                         color:var(--alerte)}
.puce.attention, .puce.preparation{background:var(--creux);
                                   color:var(--aliment)}
.puce.neutre{background:var(--creux); color:var(--taupe)}
.puce.nouvelle{background:var(--creux); color:var(--action)}
.puce.livraison{background:var(--creux); color:var(--aliment)}
.pastille-etat{display:inline-flex; align-items:center; gap:7px;
               font-size:17px; font-weight:700; color:var(--brun)}
.pastille-etat i{width:9px; height:9px; border-radius:50%;
                 background:currentColor; flex:0 0 auto}
.pastilles{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* ==================================================== LES CONSEILS ======
   Une alerte n'est plus un filet vertical : c'est une bulle d'assistant,
   avec sa pastille ronde à gauche. Le coin haut-gauche à 4 px pointe vers
   la pastille — c'est ce qui la fait lire comme une parole, et non comme
   un encadré d'avertissement de plus.
   ======================================================================== */
/* DEUX ÉCRITURES, UNE SEULE APPARENCE. alerteHTML() produit une bulle avec
   sa pastille d'assistant ; une quinzaine d'écrans écrivent encore
   « <div class="alerte"><b>…</b><p>…</p></div> » à la main. Sans ce
   dédoublement, le titre de ces derniers se retrouvait dans une colonne
   de huit lettres, à côté de son texte. */
.alerte{display:block; margin-bottom:12px; padding:13px 15px;
        border-radius:4px 18px 18px 18px; background:var(--creux)}
.alerte:has(> .pastille){display:flex; gap:10px; padding:0;
                         background:none; border-radius:0}
.alerte .pastille{flex:0 0 auto; display:grid; place-items:center;
                  width:44px; height:44px; border-radius:22px;
                  background:var(--encre)}
.alerte .pastille svg{width:24px; height:24px; fill:none; stroke:var(--sable);
                      stroke-width:2.2; stroke-linecap:round;
                      stroke-linejoin:round}
.alerte > div{flex:1; min-width:0; padding:13px 15px;
              border-radius:4px 18px 18px 18px; background:var(--creux)}
.alerte b{display:block; font-size:19px; font-weight:700; margin-bottom:4px;
          color:var(--encre)}
.alerte p{font-size:18px; line-height:1.45; color:var(--brun)}
.alerte .agir{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.alerte.grave, .alerte.grave > div{background:var(--alerte-fond)}
.alerte.grave b{color:var(--alerte)}
.alerte.grave .pastille{background:var(--alerte)}
.alerte.attention, .alerte.attention > div{background:var(--creux)}
.alerte.attention b{color:var(--aliment)}
.alerte.attention .pastille{background:var(--aliment)}
.alerte.bon, .alerte.bon > div{background:var(--argent-fond)}
.alerte.bon b{color:var(--argent-texte)}
.alerte.bon .pastille{background:var(--argent)}
.alerte.info .pastille{background:var(--encre)}
.alerte.panne, .alerte.panne > div{background:var(--alerte-fond)}
.alerte.panne b{color:var(--alerte)}

/* ============================================ SIGNALER UN PROBLÈME ===== */
#d-signaler{width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px);
            border:0; border-radius:22px; padding:22px;
            background:var(--panneau); color:var(--encre)}
#d-signaler::backdrop{background:rgba(0,0,0,.45)}
#d-signaler textarea{width:100%; font:inherit; font-size:18px;
                     min-height:130px; padding:12px; border-radius:14px;
                     border:1px solid var(--standard); background:var(--creux);
                     color:var(--encre)}
.choix-signal{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.choix-signal label{display:inline-flex; flex-direction:row; align-items:center; gap:8px;
                    min-height:48px; padding:0 16px; margin:0;
                    border:1px solid var(--trait); border-radius:24px;
                    font-size:18px; cursor:pointer}
/* Le style général des champs donne aux boutons radio la largeur d'un
   champ texte : ils devenaient des disques de 50 px. */
.choix-signal input{width:22px; height:22px; min-height:0; margin:0;
                    padding:0; flex:0 0 auto}
.choix-signal label:has(input:checked){border-color:var(--terre);
                                       background:var(--terre-pale)}

/* ==================================================== BOUTONS & CHAMPS == */
button{font-family:inherit; font-size:18px; font-weight:700; cursor:pointer;
       min-height:48px; padding:0 16px; border:0; border-radius:var(--r-pilule);
       background:var(--creux); color:var(--encre);
       display:inline-flex; align-items:center; justify-content:center;
       gap:9px; transition:background 160ms ease, transform 90ms ease}
button:active{transform:scale(.97)}
button.action{background:var(--action); color:var(--action-texte);
              min-height:56px; border-radius:var(--r-bandeau); padding:0 20px}
button.action:hover{background:#63380F}
button.doux{background:var(--panneau); color:var(--encre)}
button.doux:hover{background:var(--creux)}
button.nu{background:none; padding:0 4px; color:var(--action);
          font-weight:700; min-height:48px}
button.nu:hover{color:var(--encre)}
button.danger{background:var(--alerte-fond); color:var(--alerte)}
button:disabled{opacity:.45; cursor:not-allowed}
/* Les boutons passent à la ligne, et un bouton plus large que l'écran se
   plie plutôt que de le déborder : mesuré à 138 px de dépassement en
   390 px sur l'écran de la journée. */
.rangee{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
        padding-top:12px; max-width:100%}
.rangee > *{max-width:100%}
.rangee button, .agir button{white-space:normal; text-align:left}
.rangee.serree{gap:8px; padding-top:8px}
.agir{display:flex; gap:8px; flex-wrap:wrap}

/* Les filtres deviennent des touches : 56 px, pas un lien de 13 px. */
.filtres{display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px;
         scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtres button{min-height:56px; padding:0 16px; border-radius:var(--r-touche);
                background:var(--panneau); color:var(--brun); font-weight:600;
                white-space:nowrap}
.filtres button.actif{background:var(--action); color:var(--action-texte);
                      font-weight:700}

label{display:flex; flex-direction:column; gap:6px; font-size:18px;
      font-weight:700; color:var(--brun); margin-top:14px}
label.enligne{flex-direction:row; align-items:center; gap:10px;
              font-weight:600; color:var(--encre); min-height:48px}
input,select,textarea,button.champ-bouton{
  font-family:inherit; font-size:18px; font-weight:600; color:var(--encre);
  background:var(--panneau); border:1px solid var(--bord);
  border-radius:var(--r-touche); min-height:56px; padding:10px 14px;
  width:100%; transition:border-color 160ms ease}
input[type=checkbox]{width:24px; min-width:24px; height:24px; min-height:24px;
                     accent-color:var(--action)}
textarea{min-height:110px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus,button.champ-bouton:focus{
  border-color:var(--action)}
input::placeholder,textarea::placeholder{color:var(--taupe)}
input[type=number]{font-family:var(--chiffres);
                   font-variant-numeric:tabular-nums}
button.champ-bouton{text-align:left; justify-content:flex-start;
                    font-weight:600}
button.champ-bouton::after{content:"▾"; margin-left:auto; color:var(--taupe)}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px}
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px}
@media (max-width:640px){
  .duo,.trio{grid-template-columns:minmax(0,1fr)}
}
.etat{font-size:18px; font-weight:700; min-height:1.3em; margin-top:12px}
.etat.ok{color:var(--argent)} .etat.err{color:var(--alerte)}
.apercu{background:var(--creux); border-radius:var(--r-bandeau);
        padding:14px 16px; font-size:18px; line-height:1.45;
        color:var(--brun); margin-top:12px}
.vide{color:var(--brun); font-size:18px; padding:22px 0; max-width:60ch}
.vide b{display:block; font-family:var(--titre); font-size:20px;
        font-weight:700; color:var(--encre); margin-bottom:4px}

/* La saisie du jour : des chiffres énormes, pas des champs de formulaire. */
.saisie{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 18px}
@media (min-width:900px){ .saisie{grid-template-columns:repeat(4,minmax(0,1fr))} }
.saisie label{margin-top:16px}
.saisie input{font-family:var(--chiffres); font-size:34px; font-weight:700;
              min-height:72px; text-align:center; letter-spacing:-.03em}

/* ==================================================== LES FENÊTRES ====== */
.voile{position:fixed; inset:0; z-index:110; display:flex;
       align-items:center; justify-content:center; padding:18px;
       background:rgba(30,27,24,.5); overflow-y:auto}
.voile[hidden]{display:none}
.feuille{width:520px; max-width:100%; background:var(--papier);
         border-radius:24px; padding:20px; max-height:92vh; overflow-y:auto}
.feuille.large{width:1060px}
.feuille > h2{font-size:24px; margin-bottom:6px}
@media (max-width:700px){
  .feuille{width:100%; border-radius:20px; padding:16px}
}

/* ==================================================== LES GRAPHIQUES ==== */
.graphe{display:block; max-width:100%; overflow:visible}
.graphe-cadre{min-height:1px; position:relative}
.graphe-legende{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px}
.graphe-legende span{display:inline-flex; align-items:center; gap:8px;
                     font-size:17px; font-weight:600; color:var(--brun);
                     white-space:nowrap}
.graphe-legende i{display:inline-block; flex:none; width:18px; height:4px;
                  border-radius:2px}
.pt-hit{cursor:pointer}
.graphe-bulle{position:absolute; top:6px; z-index:2; padding:11px 13px;
              border-radius:var(--r-bandeau); background:var(--panneau);
              font-size:17px; pointer-events:none; white-space:nowrap}
.graphe-bulle .d{color:var(--taupe); font-size:16px; margin-bottom:3px}
.graphe-bulle .l{display:flex; justify-content:space-between; gap:14px}
.graphe-bulle .l span{color:var(--brun)}
.graphe-bulle .l b{font-weight:700; font-family:var(--chiffres)}

/* ==================================================== LES BANDES ========
   L'arc de vie : une bande sur une ligne, du premier jour à la réforme.
   ======================================================================== */
.lot{display:grid; grid-template-columns:minmax(150px,1fr) minmax(180px,2.2fr)
     minmax(110px,.7fr); gap:14px 20px; align-items:center;
     background:var(--panneau); border-radius:var(--r-carte);
     padding:16px 17px; margin-bottom:10px; cursor:pointer}
.lot:hover{background:var(--creux)}
.lot .nom{font-family:var(--titre); font-size:20px; font-weight:700}
.lot .meta{font-size:17px; color:var(--brun); margin-top:3px}
.lot.attente .nom, .lot.attente .valeur{color:var(--taupe)}
.lot .droite{text-align:right}
.lot .valeur{font-family:var(--chiffres); font-size:26px; font-weight:700;
             letter-spacing:-.03em}
.lot .cible{font-size:17px; color:var(--brun); padding-top:2px}
@media (max-width:860px){
  .lot{grid-template-columns:minmax(0,1fr) auto}
  .lot .arc{grid-column:1 / -1; order:3}
}
.arc{position:relative; min-width:0}
.arc .rail{display:flex; height:16px; overflow:hidden; border-radius:8px;
           background:var(--creux)}
/* Les segments doivent porter la hauteur du rail : en flex, un bloc sans
   hauteur propre reste à zéro, et l'arc de vie s'affichait vide. */
.arc .rail span{display:block; height:100%; flex:0 0 auto}
.arc .curseur-jour{position:absolute; top:-3px; bottom:-3px; width:3px;
                   border-radius:2px; background:var(--encre)}
.arc .bornes{display:flex; justify-content:space-between; gap:12px;
             padding-top:8px; font-size:16px; color:var(--taupe)}
.arc .attente{height:16px}
.ph-avant{background:repeating-linear-gradient(135deg,var(--bord) 0 5px,
          var(--creux) 5px 10px)}
.ph-demarrage{background:#C3D6BE} .ph-croissance{background:#9DBE9C}
.ph-developpement{background:#6E9472} .ph-entree{background:#E8C98F}
.ph-montee{background:#D79F4E} .ph-pic{background:#B8763A}
.ph-persistance{background:#C99A62} .ph-declin{background:#E3D3B8}
.ph-vide{background:var(--grille)}

/* ==================================================== LES COMMANDES ===== */
.cmd{background:var(--panneau); border-radius:var(--r-carte);
     border-left:6px solid var(--bord); padding:14px 16px; margin-bottom:10px;
     cursor:pointer}
.cmd:hover{background:var(--creux)}
.cmd.nouvelle{border-left-color:var(--action)}
.cmd.preparation{border-left-color:var(--aliment)}
.cmd.livraison{border-left-color:var(--ponte)}
.cmd.livree{border-left-color:var(--argent)}
.cmd.annulee{border-left-color:var(--bord); opacity:.65}
.cmd .haut{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cmd .num{font-family:var(--chiffres); font-size:17px; color:var(--taupe);
          min-width:70px}
.cmd .nom{flex:1; min-width:0; font-size:19px; font-weight:600}
.cmd .tot{font-family:var(--chiffres); font-size:21px; font-weight:700;
          white-space:nowrap}
.cmd .bas{display:flex; gap:8px 14px; align-items:center; flex-wrap:wrap;
          margin-top:8px; font-size:17px; color:var(--brun)}
.cmd .detail{margin-top:6px; font-size:17px; color:var(--brun)}

/* ==================================================== LA CLOCHE ========= */
.cloche{position:relative; display:inline-flex}
.cloche-bouton{position:relative; background:var(--creux); border:0;
               width:52px; min-height:52px; padding:0; border-radius:26px;
               color:var(--encre)}
.cloche-bouton:hover{background:var(--bord)}
.cloche-bouton svg{width:24px; height:24px}
.cloche-bouton .pastille{position:absolute; top:2px; right:2px; min-width:22px;
                         height:22px; padding:0 5px; border-radius:11px;
                         background:var(--alerte); color:var(--panneau);
                         font-family:var(--chiffres); font-size:15px;
                         font-weight:700; display:grid; place-items:center}
.cloche-panneau{position:absolute; top:calc(100% + 10px); right:0; z-index:120;
                width:360px; max-width:88vw; background:var(--panneau);
                border-radius:var(--r-carte); overflow:hidden;
                max-height:70vh; overflow-y:auto}
.cloche-panneau .tete{display:flex; align-items:center;
                      justify-content:space-between; gap:12px;
                      padding:14px 16px; border-bottom:1px solid var(--trait)}
.cloche-panneau .tete b{font-family:var(--titre); font-size:19px;
                        font-weight:700}
.cloche-panneau .avis{display:flex; gap:12px; width:100%; text-align:left;
                      padding:14px 16px; border:0; border-radius:0;
                      border-bottom:1px solid var(--trait);
                      background:var(--panneau); min-height:66px;
                      align-items:flex-start}
.cloche-panneau .avis:hover{background:var(--creux)}
.cloche-panneau .avis.neuf{background:var(--argent-fond)}
.cloche-panneau .avis .icone{font-size:20px; flex:0 0 auto}
.cloche-panneau .avis .corps{display:block; min-width:0}
.cloche-panneau .avis b{display:block; font-size:18px; font-weight:700}
.cloche-panneau .avis .texte{display:block; font-size:17px; color:var(--brun);
                             line-height:1.4; white-space:normal}
.cloche-panneau .avis .quand{display:block; font-size:16px; color:var(--taupe);
                             margin-top:2px}
.cloche-panneau .vide-avis{padding:22px 16px; font-size:18px;
                           color:var(--brun)}
@media (max-width:700px){
  .cloche-panneau{position:fixed; left:12px; right:12px; top:76px; width:auto;
                  max-width:none}
}

/* ==================================================== LE DÉTAIL ========= */
.facteurs{display:flex; flex-direction:column; margin-top:10px}
/* MESURÉ PAR verifier-parcours.py : cette ligne dépassait de 107 px en
   390 px de large, et de 11 px en 1440. Le nom portait bien `min-width:0`,
   mais la LIGNE, elle, n'était pas contrainte : une jauge de 72 px à
   largeur fixe plus une valeur en `nowrap` la poussaient hors de l'écran,
   où `body{overflow-x:hidden}` la coupait. Sur un téléphone, la valeur
   passe donc sous le nom plutôt que d'être tronquée. */
.facteurs .f{display:flex; align-items:center; gap:12px; min-height:62px;
             padding:10px 0; border-top:1px solid var(--trait);
             flex-wrap:wrap; max-width:100%}
.facteurs .f:first-child{border-top:0}
.facteurs .f .nom{flex:1; min-width:0; font-size:18px; font-weight:600}
.facteurs .f .val{margin-left:auto; font-family:var(--chiffres);
                  font-size:18px; font-weight:700; white-space:nowrap}
.facteurs .f .jauge{flex:0 0 72px; width:72px; height:10px;
                    border-radius:5px; background:var(--creux);
                    overflow:hidden}
.facteurs .f .jauge i{display:block; height:100%; background:var(--ponte)}
.facteurs .f.calme .nom{color:var(--taupe)}
.facteurs .f.calme .val{color:var(--argent)}

.hypotheses{display:flex; flex-direction:column}
.hypotheses .h{display:flex; align-items:flex-start; gap:14px; padding:16px 0;
               border-top:1px solid var(--trait)}
.hypotheses .h:first-child{border-top:0}
.hypotheses .rang{flex:0 0 30px; width:30px; height:30px; border-radius:15px;
                  background:var(--creux); color:var(--encre);
                  font-family:var(--chiffres); font-size:17px; font-weight:700;
                  display:grid; place-items:center}
.hypotheses .t{flex:1; min-width:0}
.hypotheses .t b{display:block; font-size:19px; font-weight:700;
                 margin-bottom:4px}
.hypotheses .t p{font-size:18px; line-height:1.45; color:var(--brun);
                 margin-bottom:6px}
.hypotheses .t p.geste{color:var(--encre); font-weight:600}
.hypotheses .val{flex:0 0 auto; font-family:var(--chiffres); font-size:18px;
                 font-weight:700; white-space:nowrap}
@media (max-width:700px){
  .hypotheses .val{display:none}
}

.jauge-axe{display:grid; grid-template-columns:auto 1fr auto; gap:10px 14px;
           align-items:center; font-size:18px}
.jauge-axe .barre{height:16px; border-radius:8px; background:var(--creux);
                  overflow:hidden}
.jauge-axe .barre i{display:block; height:100%; background:var(--argent)}
.jauge-axe .barre.moyen i{background:var(--aliment)}
.jauge-axe .barre.bas i{background:var(--alerte)}
.jauge-axe .val{font-family:var(--chiffres); font-weight:700;
                font-variant-numeric:tabular-nums; text-align:right}
.jauge{height:16px; border-radius:8px; background:var(--creux);
       overflow:hidden}
.jauge i{display:block; height:100%; background:var(--argent)}

.score{display:flex; align-items:baseline; gap:12px}
.score b{font-family:var(--chiffres); font-size:54px; font-weight:700;
         line-height:1; letter-spacing:-.03em}
.score span{font-size:18px; color:var(--brun)}

.flux{display:flex; flex-direction:column}
.flux .f{display:grid; grid-template-columns:9em 1fr auto; gap:4px 14px;
         align-items:center; min-height:62px; padding:10px 0;
         border-top:1px solid var(--trait)}
.flux .f:first-child{border-top:0}
.flux .q{font-size:18px; font-weight:600}
.flux .d{font-size:17px; color:var(--brun)}
.flux b{font-family:var(--chiffres); font-size:21px; font-weight:700;
        text-align:right; white-space:nowrap}
.flux i{grid-column:2 / -1; font-style:normal; font-size:17px;
        color:var(--taupe)}
.flux .entre b, .flux .entre .d{color:var(--argent)}
.flux .sort b, .flux .sort .d{color:var(--alerte)}
.flux .plat b, .flux .plat .d{color:var(--taupe)}
@media (max-width:560px){
  .flux .f{grid-template-columns:1fr auto}
  .flux .d{grid-column:1 / -1}
}

.fil{position:relative; padding-left:26px}
.fil::before{content:""; position:absolute; left:7px; top:6px; bottom:6px;
             width:2px; background:var(--trait)}
.fil .mois{margin-bottom:26px; position:relative}
.fil .mois > h3{font-family:var(--titre); font-size:20px; font-weight:700;
                margin-bottom:6px}
.fil .mois > h3::before{content:""; position:absolute; left:-26px; top:8px;
                        width:16px; height:16px; border-radius:8px;
                        background:var(--creux);
                        box-shadow:0 0 0 3px var(--papier)}
.fil .ev{display:flex; gap:12px; align-items:flex-start; padding:10px 0;
         border-top:1px solid var(--trait)}
.fil .ev .quand{flex:0 0 76px; color:var(--taupe); font-size:17px}
.fil .ev .quoi b{display:block; font-size:18px; font-weight:700}
.fil .ev .quoi span{color:var(--brun); font-size:17px}
.fil .ev i{flex:0 0 10px; height:10px; border-radius:5px; margin-top:7px;
           background:var(--bord)}
.fil .ev.grave i{background:var(--alerte)}
.fil .ev.attention i{background:var(--aliment)}
.fil .ev.bon i{background:var(--argent)}
.fil .ev.info i{background:var(--ponte)}

.creuser{margin-top:14px; border-top:1px solid var(--trait)}
.creuser > summary{cursor:pointer; list-style:none; min-height:56px;
                   display:flex; align-items:center; gap:10px;
                   font-size:18px; font-weight:700; color:var(--action)}
.creuser > summary::-webkit-details-marker{display:none}
.creuser > summary::before{content:"+"; font-family:var(--chiffres);
                           font-size:20px; width:32px; height:32px;
                           border-radius:16px; background:var(--creux);
                           display:grid; place-items:center; flex:0 0 auto}
.creuser[open] > summary::before{content:"–"}
.creuser > *:not(summary){margin-top:12px}

details.section > summary.detail-ouvrir{cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:10px; min-height:56px;
  padding:0 18px; border-radius:var(--r-pilule); background:var(--panneau);
  color:var(--action); font-size:18px; font-weight:700; margin-bottom:8px}
details.section > summary.detail-ouvrir::-webkit-details-marker{display:none}
details.section > summary.detail-ouvrir::after{content:"▾"}
details.section[open] > summary.detail-ouvrir::after{content:"▴"}

/* Le « ? » qui explique un mot technique. */
.info-terme{display:inline-grid; place-items:center; width:30px; height:30px;
            border-radius:15px; background:var(--creux); color:var(--brun);
            font-size:17px; font-weight:700; cursor:pointer; border:0;
            min-height:30px; padding:0; margin-left:6px; vertical-align:middle}
.info-terme:hover{background:var(--bord); color:var(--encre)}
.info-bulle{position:fixed; z-index:200; padding:15px 17px; font-size:18px;
            line-height:1.45; color:var(--brun); background:var(--panneau);
            border-radius:var(--r-carte); max-width:330px}
.info-bulle b{display:block; font-family:var(--titre); font-size:19px;
              font-weight:700; color:var(--encre); margin-bottom:4px}

.squelette{display:flex; flex-direction:column; gap:14px; padding:10px 0}
.squelette i{display:block; height:16px; border-radius:8px;
             background:var(--creux)}

/* ==================================================== LES ANIMATIONS ====
   Sobres, et coupées net si le système demande moins de mouvement.
   ======================================================================== */
@keyframes monte{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes parait{from{opacity:0} to{opacity:1}}
@keyframes trace{from{stroke-dashoffset:1400} to{stroke-dashoffset:0}}
@keyframes pousse{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes onde{from{opacity:.25; transform:translate(-50%,-50%) scale(.3)}
                to{opacity:0; transform:translate(-50%,-50%) scale(1)}}
@keyframes ressort{0%{transform:scale(.96)} 45%{transform:scale(1.03)}
                   100%{transform:scale(1)}}
@keyframes crepite{0%{transform:scale(.85)} 45%{transform:scale(1.2)}
                   100%{transform:scale(1)}}
.monte{animation:monte 260ms cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:40ms} .d2{animation-delay:80ms} .d3{animation-delay:120ms}
.d4{animation-delay:160ms} .d5{animation-delay:200ms} .d6{animation-delay:240ms}
.parait{animation:parait 300ms ease both}
.trace{stroke-dasharray:1400; animation:trace 900ms cubic-bezier(.2,.8,.2,1) 120ms both}
.pousse{transform-origin:left center;
        animation:pousse 850ms cubic-bezier(.2,.8,.2,1) both}
.ressort{animation:ressort 320ms cubic-bezier(.2,.8,.2,1) both}
.crepite{animation:crepite 300ms cubic-bezier(.2,.8,.2,1) both}
.presse{transition:transform 90ms ease-out}
.bascule{transition:transform 420ms cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ==================================================== L'IMPRESSION ====== */
@media print{
  .barre-cote,.onglets,.entete .actions,.pied,.voile,button{display:none !important}
  body{background:#fff; font-size:12pt}
  .bloc,.mesure,.liste,.table-cadre{background:#fff; border:1px solid #ccc;
                                    break-inside:avoid}
  .corps{padding-bottom:0}
}

/* ==================================================== LE TÉLÉPHONE ====== */
@media (max-width:700px){
  .section{padding-left:var(--marge); padding-right:var(--marge-d)}
  .entete{align-items:flex-start; gap:10px}
  .entete .actions{width:100%; justify-content:space-between}
  .mesures{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
  .mesure b{font-size:28px}
  .lot{grid-template-columns:minmax(0,1fr) auto}
  table.donnees{font-size:17px}
  .feuille{padding:16px}
}
td .puce, th .puce, h2 .puce{margin-left:10px}


/* ==================================================== L'ANNEAU DE PONTE =
   Le seul objet du tableau du jour. Il occupe la place d'une main, se lit
   de loin, et son ouverture claire ne mesure que 164 px : rien d'autre ne
   tient au milieu que le pourcentage et la flèche de tendance.
   ======================================================================== */
.heros{display:flex; flex-wrap:wrap; align-items:center; gap:22px;
       padding:22px 20px}
.anneau{position:relative; flex:0 0 auto; width:218px; height:218px}
.anneau svg{width:100%; height:100%; display:block}
.anneau svg circle:last-child{transition:stroke-dashoffset 900ms
                              cubic-bezier(.2,.8,.2,1)}
.anneau .dedans{position:absolute; inset:0; display:flex;
                flex-direction:column; align-items:center;
                justify-content:center; gap:2px; text-align:center}
.anneau .enorme{max-width:160px}
.anneau .tendance{display:inline-flex; align-items:center; gap:6px;
                  max-width:160px; font-size:19px; font-weight:700;
                  white-space:nowrap}
.anneau .tendance.vert{color:var(--argent)}
.anneau .tendance.rouge{color:var(--alerte)}
.heros-texte{flex:1 1 220px; min-width:200px; display:flex;
             flex-direction:column; gap:10px; align-items:flex-start}
.heros-texte .prose{font-size:18px}

/* Bon jour / jour de baisse : couleur, icône et mot — les trois ensemble. */
.pastille-jour{display:inline-flex; align-items:center; gap:8px;
               min-height:44px; padding:0 16px; border-radius:22px;
               background:var(--argent-fond); color:var(--argent-texte);
               font-size:19px; font-weight:700; white-space:nowrap}
.pastille-jour.baisse{background:var(--alerte-fond); color:var(--alerte)}
.ligne-oeufs{display:flex; align-items:center; gap:10px; font-size:19px;
             font-weight:600; color:var(--brun)}
.serie{display:inline-flex; align-items:center; gap:9px; min-height:44px;
       padding:0 14px; border-radius:var(--r-bandeau);
       background:var(--argent-fond); color:var(--argent-texte);
       font-size:18px; font-weight:700}

/* Les quatre lignes sous l'anneau : un chiffre et son écran, à un pouce. */
.liste.fonctions{margin-top:16px}
.ligne-fonction{display:flex; align-items:center; gap:13px; width:100%;
                min-height:66px; padding:0 17px; border:0; border-radius:0;
                background:transparent; text-align:left;
                border-top:1px solid var(--trait)}
.ligne-fonction:first-child{border-top:0}
.ligne-fonction:hover{background:var(--creux)}
.ligne-fonction .nom{flex:1; min-width:0; font-size:19px; font-weight:600;
                     color:var(--encre); overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap}
.ligne-fonction .valeur{font-family:var(--chiffres); font-size:19px;
                        font-weight:700; white-space:nowrap}

@media (max-width:700px){
  .heros{padding:18px 16px; justify-content:center}
  .anneau{width:min(218px,68vw); height:min(218px,68vw)}
  .heros-texte{flex:1 1 100%; align-items:flex-start}
}


/* ==================================================== LA SAISIE DU JOUR =
   Le compteur remplace le champ de formulaire : deux touches de 64 px, le
   nombre en 50 px, et la phrase qui traduit tout de suite en pourcentage.
   ======================================================================== */
.compteur-jour{display:flex; flex-direction:column; gap:12px}
.compteur-jour .tete{display:flex; align-items:center; gap:10px;
                     font-size:18px; font-weight:700; color:var(--brun)}
.compteur-jour .compte{display:flex; align-items:center; gap:12px}
.compteur-jour .compte button{width:64px; height:64px; min-height:64px;
                              padding:0; border-radius:20px; flex:0 0 auto}
.compteur-jour .compte .moins{background:var(--creux); color:var(--action)}
.compteur-jour .compte .plus{background:var(--action);
                             color:var(--action-texte)}
.compteur-jour .compte input{flex:1; min-width:0; border:0;
                             background:transparent; text-align:center;
                             font-family:var(--chiffres); font-size:50px;
                             font-weight:700; letter-spacing:-.03em;
                             min-height:64px; padding:0}
.compteur-jour .compte input::-webkit-outer-spin-button,
.compteur-jour .compte input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0}
.compteur-jour .compte input[type=number]{-moz-appearance:textfield}
.compteur-jour .dit{display:flex; align-items:center; gap:8px; min-height:26px;
                    font-size:18px; font-weight:700}
.compteur-jour .dit.vert{color:var(--argent)}
.compteur-jour .dit.rouge{color:var(--alerte)}
.grand-bouton{width:100%; max-width:420px; min-height:66px; font-size:21px}
@media (max-width:700px){
  .rangee.garder{position:sticky; bottom:calc(var(--barre) + 10px); z-index:20;
                 padding:10px 0}
  .grand-bouton{max-width:none}
}


/* ==================================================== LES RETOUCHES =====
   Ce que la première mise en place a laissé passer, corrigé à la lecture
   des captures — c'est la seule façon de régler une interface : la
   regarder aux deux largeurs, pas seulement la décrire.
   ======================================================================== */

/* Un bouton clair sur une carte claire disparaît. */
.bloc button.doux, .liste button.doux, .feuille button.doux,
.panneau button.doux{background:var(--creux)}
.bloc button.doux:hover, .feuille button.doux:hover{background:var(--bord)}

/* Le compte d'alertes ne doit pas pousser le libellé hors de la barre. */
.menu a{overflow:hidden}
.menu a .compte{flex:0 0 auto}
/* Le libellé cède la place au compte (ellipse) : sans ça, « Le tableau du
   jour » + la pastille dépassaient la barre et la pastille était coupée. */
.menu a .lib{min-width:0; overflow:hidden; text-overflow:ellipsis}

/* Le compteur d'œufs se tient dans une main, pas sur toute la largeur. */
.compteur-jour{max-width:460px}

/* ---- l'en-tête, sur téléphone ----------------------------------------
   Trois lignes empilées mangeaient la moitié de l'écran avant le premier
   chiffre. On garde le titre, l'état du réseau et la cloche ; le nom du
   compte et « Se déconnecter » vivent dans Réglages, où on les cherche. */
@media (max-width:700px){
  .entete{padding:12px var(--marge-d) 8px var(--marge); align-items:center}
  .entete .texte{flex:1 1 auto}
  .datelle{font-size:16px}
  .entete h1{font-size:22px}
  .entete .actions{width:auto; gap:8px}
  .compte-barre .qui{display:none}
  .compte-barre button{padding:0 12px; min-height:44px}
  .pastille-reseau span{display:none}
  .pastille-reseau{padding:0 12px}
  .periode{order:3; width:100%; justify-content:space-between}
  .periode span{flex:1; justify-content:center}
  .cloche-bouton{width:48px; min-height:48px}
}

/* ---- l'action de la saisie reste sous le pouce -----------------------
   Sur téléphone, « Enregistrer » est fixé au-dessus de la barre du bas :
   la saisie est longue, et personne ne doit faire défiler pour valider.
   Le fond est opaque, sinon les chiffres passent dessous. */
@media (max-width:700px){
  #vue-jour .rangee.garder{position:fixed; left:0; right:0;
    bottom:calc(var(--barre) + env(safe-area-inset-bottom)); z-index:60;
    margin:0; padding:10px var(--marge); background:var(--papier);
    box-shadow:0 -10px 20px -14px rgba(30,27,24,.35)}
  #vue-jour .section{padding-bottom:86px}
}


/* Le mot « Hors ligne » ne se cache jamais, même sur un écran de 360 px :
   c'est l'information, pas la décoration. Quand tout va bien, la coche
   verte suffit. */
@media (max-width:700px){
  .pastille-reseau.hors span{display:inline}
}

/* La page commence tout de suite : l'ancien retrait de 52 px poussait le
   premier chiffre sous la ligne de flottaison sur un téléphone. */
.section{padding-top:6px}
.section + .section{padding-top:22px}


/* ==================================================== LES FENÊTRES ======
   Les onglets d'une fiche : huit entrées qui ne tiennent pas en largeur
   sur un téléphone. Elles défilent horizontalement plutôt que de se
   couper — un onglet à moitié visible se voit, et se touche.
   ======================================================================== */
#bf-onglets{padding-bottom:12px}
#bf-onglets button{min-height:52px; font-size:18px}
.feuille > .filtres{margin-bottom:6px}

/* « Tout l'élevage » : six familles, vingt et un écrans, une ligne par
   écran. */
#plus-liens .famille{margin-bottom:22px}
#plus-liens .legende{margin-bottom:6px}
#plus-liens .ligne{min-height:56px; color:var(--encre)}
#plus-liens .ligne b{font-weight:600}
#plus-liens .ligne:hover{background:var(--creux)}

/* ==================================================== LES AUTRES RÔLES ==
   Le client, le vendeur et la connexion partagent cette feuille : leurs
   pages héritent de la palette, il ne leur manquait que l'échelle — 18 px
   de texte et des cartes de 22 px de rayon, comme chez l'éleveur.
   ======================================================================== */
.page{max-width:720px}
.chapeau h1{font-family:var(--titre); font-weight:800; letter-spacing:-.02em}
.chapeau p{font-size:18px; color:var(--brun); line-height:1.45}
.chapeau .qui{font-size:17px; color:var(--taupe)}
.eleveur,.demande,.abo,.recu,.role{background:var(--panneau); border:0;
  border-radius:var(--r-carte); padding:18px}
.eleveur{display:block; width:100%; text-align:left; margin-bottom:12px}
.eleveur:hover,.role:hover{background:var(--creux)}
.eleveur b,.demande .quoi,.abo .quoi{font-family:var(--titre); font-size:20px;
  font-weight:700}
.eleveur .ou,.abo .ou{font-size:17px; color:var(--taupe)}
.eleveur .mot,.demande .ferme,.demande .notes,.abo .quand{font-size:17px;
  color:var(--brun)}
.eleveur .chiffres{display:flex; gap:20px; margin-top:12px; flex-wrap:wrap}
.eleveur .chiffres i{font-style:normal; font-size:17px; color:var(--taupe)}
.eleveur .chiffres em{font-style:normal; font-family:var(--chiffres);
  font-size:21px; font-weight:700; display:block}
.article{display:flex; gap:14px; align-items:center; padding:14px 0;
  border-top:1px solid var(--trait)}
.article .txt b{font-size:19px; font-weight:600}
.article .txt span,.article .txt i{font-size:17px; color:var(--brun)}
.article .prix{font-family:var(--chiffres); font-size:20px; font-weight:700}
.compteur{display:flex; align-items:center; gap:6px}
.compteur button{min-width:48px; min-height:48px; padding:0; font-size:22px;
  border-radius:var(--r-touche); background:var(--creux)}
.compteur input{width:72px; min-height:48px; text-align:center; padding:4px;
  font-family:var(--chiffres); font-size:20px}
.panier{background:var(--panneau); border-top:1px solid var(--trait);
  padding:14px var(--marge) calc(14px + env(safe-area-inset-bottom))}
.panier .total{font-family:var(--chiffres); font-size:22px; font-weight:700}
.panier .total span{font-family:var(--sans); font-size:17px; font-weight:400;
  color:var(--brun)}
.recu .numero{font-family:var(--chiffres); font-size:34px; font-weight:700}
.role b{font-size:19px; font-weight:700}
.role span{font-size:17px; color:var(--brun); margin-top:4px; display:block}
.role.actif{background:var(--creux); box-shadow:inset 0 0 0 2px var(--action)}
.choix label{min-height:48px; border-radius:var(--r-touche);
  background:var(--panneau); padding:0 14px; font-size:18px; margin:0}
.choix label:has(input:checked){background:var(--creux);
  box-shadow:inset 0 0 0 2px var(--action)}
.demande.urgente{box-shadow:inset 0 0 0 2px var(--alerte)}
.demande .repondu{background:var(--argent-fond); color:var(--argent-texte);
  border-radius:var(--r-bandeau); padding:12px 14px; font-size:17px}
.chapeau .plume{width:30px; height:38px; opacity:1; margin-bottom:8px}


/* Le titre d'écran et son bouton s'empilent sur un téléphone : côte à
   côte, la phrase se retrouvait dans une colonne de huit lettres. */
@media (max-width:700px){
  .section-titre{flex-direction:column; align-items:stretch; gap:10px}
  .section-titre > button,.section-titre .rangee{align-self:flex-start}
}


/* Une alerte écrite à la main n'a ni pastille ni bouton : son titre et son
   texte se suivent, comme dans la bulle. */
.alerte > b{display:block; font-size:19px; font-weight:700; margin-bottom:4px}
.alerte > p{font-size:18px; line-height:1.45; color:var(--brun)}
.alerte.info{background:var(--argent-fond)}
.alerte.info > b{color:var(--argent-texte)}
.alerte:has(> .pastille).info{background:none}


/* =========================================================================
   LE BUDGET, LES MODULES, L'ACCÈS
   -------------------------------------------------------------------------
   Trois écrans neufs, et pas une couleur en dur : tout vient des jetons du
   haut de ce fichier. Un écran qui pose sa propre teinte finit toujours par
   dériver de deux points, et c'est ce qu'on voit en premier.
   ========================================================================= */

/* L'ÉCRAN VERROUILLÉ. Il explique, il ne disparaît pas — un écran qui
   s'efface laisse croire à une panne, un écran grisé montre ce qu'on n'a
   pas encore. */
.bloc.verrou{text-align:center; padding:44px 26px}
.bloc.verrou h2{margin-top:14px}
.bloc.verrou .prose,.bloc.verrou .aide{margin:10px auto 0}
.bloc.verrou .agir{justify-content:center; margin-top:20px}
.verrou-signe{display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%; background:var(--creux)}
.verrou-signe svg{width:30px; height:30px}

/* Une entrée de menu fermée. Elle reste LISIBLE : elle nomme ce qui
   existe et qu'on n'a pas encore. On ne la retire pas — un menu qui
   rétrécit fait croire à une application incomplète. */
.menu a.ferme,.onglets button.ferme,#plus-liens .ligne.ferme{opacity:.55}
.menu a.ferme::after,#plus-liens .ligne.ferme::after{content:"·";
  margin-left:auto; color:var(--taupe); font-weight:700}

/* LA COURSE DU MOIS. La barre, c'est ce qui est sorti ; le trait, c'est où
   l'on en est dans le mois. Avoir mangé 60 % de son enveloppe n'est ni bon
   ni mauvais : c'est bon le 20, mauvais le 8. */
.budget-course{display:flex; align-items:center; gap:14px}
.budget-course .piste{position:relative; flex:1; height:22px;
  border-radius:11px; background:var(--creux); overflow:visible}
.budget-course .pousse{display:block; height:100%; border-radius:11px;
  background:var(--argent)}
.budget-course .pousse.haut{background:var(--alerte)}
.budget-course .marque-temps{position:absolute; top:-5px; width:3px;
  height:32px; border-radius:2px; background:var(--encre); transform:translateX(-1px)}
.budget-course .val{font-family:var(--chiffres); font-weight:700;
  font-variant-numeric:tabular-nums; font-size:20px; min-width:60px;
  text-align:right}

/* La cause d'un écart, sous sa pastille. Un montant seul ne se corrige
   pas ; une cause, si. */
.budget-table .cause{display:block; margin-top:6px; font-size:16px;
  line-height:1.35; color:var(--brun); max-width:40ch}
.budget-table input[type=number]{width:100%; min-width:96px; max-width:140px;
  min-height:44px; text-align:right; font-family:var(--chiffres);
  font-variant-numeric:tabular-nums}