/* Baby web — feuille de style unique.
 *
 * Reprise de la maquette « arthur-quotidien.html », qui fait foi pour le rendu
 * (FR-UI-4). Les valeurs de la charte ne se retouchent pas au fil de l'eau :
 * une couleur qui manque se dérive des variables ci-dessous, elle ne s'invente
 * pas en dur dans une règle.
 *
 * Ordre du fichier :
 *   1. polices auto-hébergées
 *   2. variables de thème (clair, puis SEAM L6 pour le sombre)
 *   3. socle et mise en page
 *   4. écran de connexion
 *   5. onglet Développement
 *   6. onglet Alimentation
 *   7. onglet Agenda
 *   8. onglet Santé
 *   9. éléments transverses (barre d'onglets, boutons flottants, bandeaux)
 */

/* ---------- 1. Polices ---------------------------------------------------
 * Auto-hébergées : aucun appel à Google Fonts en production (FR-NF-7), et pas
 * de dépendance externe au chargement (FR-NF-6). Sous-ensemble latin +
 * latin étendu, axes variables conservés — la maquette pilote SOFT, WONK et
 * opsz par font-variation-settings.
 */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("fonts/karla-variable.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* ---------- 2. Variables de thème --------------------------------------- */
  :root{
    --encre:#24382B;
    /* Le même vert d'encre, en composantes, pour les textes secondaires qui
     * ont besoin d'une opacité. Sans ce jeton, ces couleurs restaient écrites
     * en dur et ne s'inversaient pas en mode sombre : une trentaine de règles
     * affichaient du gris foncé sur fond sombre, illisible — sur l'onglet
     * Alimentation, celui qu'on utilise à 3 h du matin. */
    --encre-rgb:36,56,43;
    /* Mêmes composantes pour les surfaces claires posées en semi-transparence
     * (barre d'onglets, rail collant des semaines, pastille du sélecteur de
     * sein). Écrites en dur, elles restaient claires en mode sombre : texte
     * clair sur fond clair, donc invisible. */
    --creme-rgb:251,250,247;
    --brume-rgb:239,245,236;
    /* Halo de fond, dérivé de la palette : deux verts très pâles le jour. */
    --halo-a:#E3EFDD;
    --halo-b:#E7F1E2;
    /* Textes posés sur les fonds pâles (encarts, étiquettes de catégorie,
     * pastilles). Codés en dur jusqu'ici — y compris dans agenda.js —, ils
     * restaient sombres quand leur fond devenait sombre. */
    /* Le vert plein des boutons, distinct du vert de texte. Les deux rôles
     * partageaient `--profond`, ce qui les rendait inconciliables en mode
     * sombre : éclaircir le vert pour que le texte passe l'AA sur fond sombre
     * fait tomber le texte clair posé SUR ce même vert. Deux rôles, deux
     * jetons. En clair, ils ont la même valeur — le rendu est inchangé. */
    --plein:#3E6B4A;
    /* Les intertitres en petites capitales (.bloc h3, .jour-tete,
     * .section-titre, .notes h3). La maquette les posait en --sauge, ce qui
     * donne 2,2 à 2,34:1 sur fond clair — sous le seuil AA du texte courant,
     * pour des étiquettes qui portent du sens (« Motricité », « Historique des
     * mesures »). Assombries sur arbitrage : 5,6:1 sur --brume, 5,9:1 sur
     * --creme. En mode sombre elles gardent la teinte sauge d'origine, qui y
     * rendait déjà 6,2:1. */
    --etiquette:#3E6B4A;
    /* #9C6B39, la valeur de la maquette, rendait 3,99:1 sur --abricot-pale —
     * juste sous le seuil. Assombri d'un cran : 4,96:1, à teinte constante. */
    --sur-abricot:#8C5C2A;
    --sur-abricot-fort:#6B3F22;
    /* 3,91:1 sur --bleu-pale dans la maquette ; assombri d'un cran : 4,67:1. */
    --sur-bleu:#456F81;
    --sur-lavande:#6D5F8C;
    --profond:#3E6B4A;
    --sauge:#8FAE8B;
    --pale:#D9E7D4;
    --brume:#EFF5EC;
    --creme:#FBFAF7;
    --bleu:#93B6C6;
    --bleu-pale:#E4EFF3;
    --abricot:#E2B183;
    --abricot-pale:#FAEDE0;
    --lavande:#B4A8CB;
    --lavande-pale:#EDE8F5;
    --trait:rgba(var(--encre-rgb),.13);

    --display:"Fraunces",Georgia,serif;
    --texte:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --marge:clamp(1.05rem,5vw,2.2rem);
    --barre:calc(62px + env(safe-area-inset-bottom));
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--brume); color:var(--encre);
    font-family:var(--texte); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-bottom:calc(var(--barre) + 1rem);
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(58vw 46vw at 88% -10%, var(--halo-a) 0%, transparent 62%),
      radial-gradient(52vw 40vw at -12% 18%, var(--halo-b) 0%, transparent 60%);
  }
  .page{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 var(--marge) 1.5rem}
  button{font:inherit; color:inherit}
  :focus-visible{outline:2px solid var(--profond); outline-offset:3px; border-radius:8px}

  .vue{display:none; animation:apparait .34s cubic-bezier(.2,.7,.3,1) both}
  .vue.on{display:block}
  @keyframes apparait{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  /* ---------- En-têtes ---------- */
  .eyebrow{
    margin:0 0 .9rem; font-size:.68rem; font-weight:600;
    letter-spacing:.22em; text-transform:uppercase; color:var(--profond); opacity:.72;
  }
  .prenom{
    font-family:var(--display); font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 120;
    font-weight:400; font-size:clamp(2.6rem,13vw,4.6rem); line-height:.88;
    letter-spacing:-.03em; margin:0;
  }
  .titre-vue{
    font-family:var(--display); font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 72;
    font-weight:500; font-size:clamp(1.9rem,8vw,2.6rem); line-height:1.05;
    letter-spacing:-.022em; margin:0;
  }
  .tete{padding:clamp(1.9rem,7vw,3rem) 0 1.2rem}
  .age{
    font-family:var(--display); font-variation-settings:"SOFT" 40,"opsz" 40;
    font-weight:300; font-size:clamp(1.15rem,4.4vw,1.6rem); line-height:1.3;
    margin:1rem 0 0; color:var(--profond); max-width:24ch;
  }
  .age strong{font-weight:600; color:var(--encre)}
  .naissance{margin:.8rem 0 0; font-size:.88rem; color:rgba(var(--encre-rgb),.62)}
  .sous{margin:.55rem 0 0; font-size:.9rem; color:rgba(var(--encre-rgb),.62); max-width:46ch}

  /* ---------- Barre des semaines (onglet 1) ---------- */
  .barre{
    position:sticky; top:0; z-index:5;
    margin:0 calc(var(--marge) * -1); padding:.7rem var(--marge) .6rem;
    background:rgba(var(--brume-rgb),.93); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--trait);
  }
  .barre-tete{display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem}
  .mois-nom{
    font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--profond); white-space:nowrap;
  }
  .mois-titre{
    font-family:var(--display); font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 24;
    font-size:.92rem; font-style:italic; font-weight:400;
    color:rgba(var(--encre-rgb),.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .fleches{margin-left:auto; display:flex; gap:.35rem; flex:none}
  .fleche{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--trait);
    background:var(--creme); cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; transition:background .18s, border-color .18s;
  }
  .fleche:hover{background:var(--pale); border-color:var(--sauge)}
  .fleche[disabled]{opacity:.35; cursor:default}
  .rail{
    display:flex; gap:.45rem; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; padding:.2rem .1rem .45rem;
    scrollbar-width:thin; scrollbar-color:var(--sauge) transparent;
  }
  .rail::-webkit-scrollbar{height:5px}
  .rail::-webkit-scrollbar-thumb{background:var(--sauge); border-radius:9px}
  .sep{flex:none; align-self:stretch; width:1px; margin:.25rem .3rem; background:var(--trait)}
  .chip{
    flex:none; scroll-snap-align:center; width:62px; padding:.45rem .3rem .4rem;
    border:1px solid var(--trait); border-radius:13px;
    background:var(--creme); cursor:pointer; text-align:center;
    transition:transform .16s, background .16s, border-color .16s, color .16s;
  }
  .chip b{
    display:block; font-family:var(--display); font-variation-settings:"SOFT" 60,"opsz" 30;
    font-weight:600; font-size:.98rem; line-height:1.1;
  }
  .chip span{display:block; font-size:.6rem; color:rgba(var(--encre-rgb),.5); margin-top:.15rem}
  .chip.passee{background:var(--pale); border-color:transparent}
  .chip.aujourdhui{border-color:var(--abricot); background:var(--abricot-pale)}
  .chip.active{background:var(--plein); border-color:var(--plein); color:#F2F8F0; transform:translateY(-2px)}
  .chip.active span{color:rgba(242,248,240,.72)}

  .panneau{
    margin-top:1.6rem; background:var(--creme);
    border:1px solid var(--trait); border-radius:22px;
    padding:1.5rem 1.35rem 1.6rem;
  }
  .p-tete{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem}
  .p-num{
    font-family:var(--display); font-variation-settings:"SOFT" 60,"opsz" 30;
    font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--profond);
  }
  .p-dates{font-size:.8rem; color:rgba(var(--encre-rgb),.5)}
  .p-drapeau{
    margin-left:auto; padding:.16rem .6rem; border-radius:999px;
    background:var(--plein); color:#F2F8F0;
    font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  }
  .p-titre{
    font-family:var(--display); font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 72;
    font-weight:500; font-size:clamp(1.35rem,5.2vw,1.8rem); line-height:1.16;
    letter-spacing:-.018em; margin:.55rem 0 1.3rem;
  }
  .bloc{margin-bottom:1.15rem}
  .bloc:last-of-type{margin-bottom:0}
  .bloc h3{
    margin:0 0 .4rem; font-size:.66rem; font-weight:700;
    letter-spacing:.17em; text-transform:uppercase; color:var(--etiquette);
  }
  .bloc ul{margin:0; padding:0; list-style:none}
  .bloc li{position:relative; padding-left:1.1rem; margin-bottom:.34rem; font-size:.96rem; line-height:1.55}
  .bloc li::before{
    content:""; position:absolute; left:0; top:.62em;
    width:7px; height:7px; border-radius:50%; background:var(--sauge);
  }
  .bloc li.progression::before{background:var(--bleu)}
  .bloc li.etape::before{background:var(--abricot); box-shadow:0 0 0 3px var(--abricot-pale)}
  .bloc li.etape{font-weight:500}
  .carte{display:block; margin-top:1.2rem; padding:.9rem 1rem; border-radius:14px; font-size:.93rem; line-height:1.5}
  .carte b{display:block; font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.28rem}
  .essai{background:var(--pale)} .essai b{color:var(--profond)}
  .savour{background:var(--abricot-pale)} .savour b{color:var(--sur-abricot)}
  .legende{display:flex; flex-wrap:wrap; gap:.45rem .9rem; margin-top:1.1rem; font-size:.75rem; color:rgba(var(--encre-rgb),.6)}
  .legende i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.35rem}
  .avert{
    margin:1.3rem 0 0; padding:.85rem 1rem; font-size:.86rem; line-height:1.5;
    background:var(--creme); border:1px solid var(--trait); border-radius:14px; color:rgba(var(--encre-rgb),.75);
  }

  /* ---------- Onglet 2 : alimentation ---------- */
  .compteurs{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.2rem}
  .compteur{
    background:var(--creme); border:1px solid var(--trait); border-radius:16px;
    padding:.75rem .6rem .7rem; text-align:center;
  }
  .compteur b{
    display:block; font-family:var(--display); font-variation-settings:"SOFT" 60,"opsz" 40;
    font-weight:600; font-size:1.35rem; line-height:1.1; letter-spacing:-.02em;
  }
  .compteur span{display:block; font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(var(--encre-rgb),.55); margin-top:.3rem}

  .encours{
    margin-top:1.1rem; padding:1.15rem 1.2rem 1.2rem;
    background:var(--abricot-pale); border:1px solid var(--abricot); border-radius:22px;
  }
  /* `--sur-abricot` et non le #9C6B39 de la maquette : ce dernier rend 3,99:1
   * sur --abricot-pale en clair et 3,76:1 en sombre, où il ne s'inverse pas.
   * Le token existait déjà pour exactement ce cas (voir sa définition) ; cette
   * règle-ci était la dernière à ne pas s'en servir. Elle n'apparaît à l'écran
   * que pendant un repas en cours, ce qui l'avait soustraite à la mesure. */
  .encours-tete{display:flex; align-items:center; gap:.5rem; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sur-abricot)}
  .pouls{width:9px; height:9px; border-radius:50%; background:#D98E4A; animation:pouls 1.8s ease-in-out infinite}
  @keyframes pouls{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)}}
  .chrono{
    font-family:var(--display); font-variation-settings:"SOFT" 40,"opsz" 90;
    font-weight:400; font-size:clamp(2.6rem,13vw,3.4rem); line-height:1; letter-spacing:-.03em;
    margin:.5rem 0 .2rem; font-variant-numeric:tabular-nums;
  }
  .depuis{font-size:.85rem; color:rgba(var(--encre-rgb),.62)}
  .actions{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap}
  .seins{display:flex; gap:.3rem; background:rgba(var(--creme-rgb),.7); padding:.25rem; border-radius:999px}
  .sein{
    border:none; background:transparent; cursor:pointer; border-radius:999px;
    padding:.42rem .85rem; font-size:.82rem; font-weight:600; color:rgba(var(--encre-rgb),.6);
  }
  .sein.on{background:var(--creme); color:var(--encre); box-shadow:0 1px 3px rgba(var(--encre-rgb),.12)}
  /* Fond `--plein` et non `--encre` : en mode sombre, `--encre` devient une
   * couleur claire — c'est le texte qui s'inverse, pas le remplissage d'un
   * bouton — et « Stop » se retrouvait écrit en blanc cassé sur fond clair,
   * à 2,57:1. `--plein` est précisément le token de remplissage, celui
   * qu'utilisent déjà .btn-plein et .chip.active. */
  .stop{
    margin-left:auto; border:none; cursor:pointer; border-radius:999px;
    padding:.6rem 1.5rem; font-size:.9rem; font-weight:700; letter-spacing:.06em;
    background:var(--plein); color:#F2F8F0;
  }
  .stop:hover{filter:brightness(1.12)}

  .jour{margin-top:1.6rem}
  .jour-tete{
    display:flex; align-items:baseline; gap:.6rem; margin-bottom:.55rem;
    font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--etiquette);
  }
  .jour-tete em{margin-left:auto; font-style:normal; font-size:.72rem; letter-spacing:.04em; text-transform:none; color:rgba(var(--encre-rgb),.5)}
  .liste{list-style:none; margin:0; padding:0; background:var(--creme); border:1px solid var(--trait); border-radius:18px; overflow:hidden}
  .ligne{display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border-bottom:1px solid var(--trait)}
  .ligne:last-child{border-bottom:none}
  .pastille{
    flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:700; letter-spacing:.02em;
  }
  .pastille.tetee{background:var(--pale); color:var(--profond)}
  .pastille.biberon{background:var(--bleu-pale); color:var(--sur-bleu)}
  .ligne-corps{min-width:0; flex:1}
  .ligne-corps b{display:block; font-size:.94rem; font-weight:600}
  .ligne-corps span{display:block; font-size:.78rem; color:rgba(var(--encre-rgb),.55); font-variant-numeric:tabular-nums}
  .duree{
    flex:none; font-size:.8rem; font-weight:600; color:var(--profond);
    background:var(--brume); border-radius:999px; padding:.22rem .6rem; font-variant-numeric:tabular-nums;
  }
  .suppr{flex:none; border:none; background:none; cursor:pointer; color:rgba(var(--encre-rgb),.32); font-size:1.1rem; line-height:1; padding:.25rem}
  .suppr:hover{color:#A6553F}
  .vide{background:var(--creme); border:1px dashed var(--trait); border-radius:18px; padding:1.2rem; font-size:.9rem; color:rgba(var(--encre-rgb),.6)}

  /* Boutons flottants */
  .flottants{
    position:fixed; right:var(--marge); bottom:calc(var(--barre) + .9rem); z-index:40;
    display:flex; align-items:center; gap:.55rem;
  }
  /* Une classe qui pose `display` l'emporte sur la règle par défaut du
   * navigateur pour `[hidden]` : sans cette ligne, l'attribut est bien posé
   * mais l'élément reste affiché. C'est ce qui laissait le bouton + visible
   * sur un onglet qui n'ajoute rien. */
  .flottants[hidden]{display:none}
  .mini{
    border:1px solid var(--trait); background:var(--creme); cursor:pointer;
    border-radius:999px; padding:.6rem 1rem; font-size:.85rem; font-weight:600;
    box-shadow:0 6px 18px rgba(var(--encre-rgb),.13);
  }
  .mini:hover{background:var(--bleu-pale); border-color:var(--bleu)}
  .plus{
    width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
    background:var(--plein); color:#F2F8F0; font-size:2rem; line-height:0;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(62,107,74,.35);
    transition:transform .16s;
  }
  .plus:active{transform:scale(.93)}
  .plus[disabled]{opacity:.4; cursor:default; box-shadow:none}

  /* ---------- Onglet 3 : agenda ---------- */
  .mois-nav{display:flex; align-items:center; gap:.7rem; margin-top:1.3rem}
  .mois-courant{
    font-family:var(--display); font-variation-settings:"SOFT" 70,"opsz" 40;
    font-weight:500; font-size:1.15rem; letter-spacing:-.01em; text-transform:capitalize;
  }
  .calendrier{
    margin-top:.8rem; background:var(--creme); border:1px solid var(--trait);
    border-radius:22px; padding:1rem .8rem 1.1rem;
  }
  .jours-nom{display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; margin-bottom:.4rem}
  .jours-nom span{text-align:center; font-size:.62rem; font-weight:700; letter-spacing:.1em; color:rgba(var(--encre-rgb),.42)}
  .grille{display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem}
  .case{
    position:relative; aspect-ratio:1/1; border:none; background:none; cursor:pointer;
    border-radius:12px; font-size:.88rem; color:var(--encre);
    display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
  }
  .case.hors{color:rgba(var(--encre-rgb),.22); cursor:default}
  .case.aujourdhui{background:var(--abricot-pale); font-weight:700}
  .case.sel{background:var(--plein); color:#F2F8F0; font-weight:700}
  .points{position:absolute; bottom:5px; left:0; right:0; display:flex; justify-content:center; gap:2px}
  .point{width:5px; height:5px; border-radius:50%}
  .case.sel .point{box-shadow:0 0 0 1px rgba(242,248,240,.6)}

  .rdv{display:flex; gap:.85rem; padding:.85rem .95rem; background:var(--creme); border:1px solid var(--trait); border-radius:18px; margin-bottom:.5rem}
  .rdv.passe{opacity:.55}
  .rdv-date{
    flex:none; width:52px; text-align:center; border-right:1px solid var(--trait); padding-right:.7rem;
  }
  .rdv-date b{
    display:block; font-family:var(--display); font-variation-settings:"SOFT" 60,"opsz" 40;
    font-weight:600; font-size:1.25rem; line-height:1;
  }
  .rdv-date span{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(var(--encre-rgb),.5); margin-top:.2rem}
  .rdv-corps{min-width:0; flex:1}
  .rdv-corps b{display:block; font-size:.96rem; font-weight:600; line-height:1.3}
  .rdv-corps span{display:block; font-size:.82rem; color:rgba(var(--encre-rgb),.58)}
  .etiquette{
    display:inline-block; margin-top:.4rem; padding:.14rem .55rem; border-radius:999px;
    font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  }
  .section-titre{
    margin:1.6rem 0 .7rem; font-size:.66rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--etiquette);
  }
  .form{
    margin-top:1rem; background:var(--creme); border:1px solid var(--trait);
    border-radius:20px; padding:1.1rem; display:none;
  }
  .form.on{display:block}
  .form label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--encre-rgb),.55); margin:.7rem 0 .25rem}
  .form label:first-child{margin-top:0}
  .form input, .form select{
    width:100%; font:inherit; font-size:.95rem; color:inherit;
    padding:.55rem .7rem; border:1px solid var(--trait); border-radius:12px; background:var(--brume);
  }
  .form-actions{display:flex; gap:.5rem; margin-top:1rem}
  .btn{border:none; cursor:pointer; border-radius:999px; padding:.6rem 1.2rem; font-size:.88rem; font-weight:600}
  .btn-plein{background:var(--plein); color:#F2F8F0}
  .btn-vide{background:transparent; border:1px solid var(--trait)}

  /* ---------- Faits notables (onglet 1) ---------- */
  .notes{margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--trait)}
  .notes h3{
    margin:0 0 .6rem; font-size:.66rem; font-weight:700;
    letter-spacing:.17em; text-transform:uppercase; color:var(--etiquette);
  }
  .note{display:flex; gap:.7rem; padding:.7rem .85rem; background:var(--brume); border-radius:14px; margin-bottom:.45rem}
  .note-corps{flex:1; min-width:0}
  .note-corps p{margin:.2rem 0 0; font-size:.94rem; line-height:1.5}
  .note-meta{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
  .note-date{font-size:.72rem; color:rgba(var(--encre-rgb),.5); font-variant-numeric:tabular-nums}
  .note-outils{flex:none; display:flex; gap:.15rem; align-items:flex-start}
  .outil{border:none; background:none; cursor:pointer; color:rgba(var(--encre-rgb),.35); font-size:.95rem; line-height:1; padding:.25rem}
  .outil:hover{color:var(--profond)}
  .vide-note{font-size:.9rem; color:rgba(var(--encre-rgb),.55); margin:0}

  /* ---------- Onglet 4 : santé ---------- */
  .segmente{display:flex; gap:.25rem; background:var(--creme); border:1px solid var(--trait); border-radius:999px; padding:.25rem; margin-top:1.2rem}
  .seg{
    flex:1; border:none; background:transparent; cursor:pointer; border-radius:999px;
    padding:.5rem .3rem; font-size:.82rem; font-weight:600; color:rgba(var(--encre-rgb),.6); white-space:nowrap;
  }
  .seg.on{background:var(--plein); color:#F2F8F0}
  .graphe{
    margin-top:.9rem; background:var(--creme); border:1px solid var(--trait);
    border-radius:22px; padding:1rem .8rem .7rem;
  }
  .graphe svg{display:block; width:100%; height:auto}
  .graphe-tete{display:flex; align-items:baseline; gap:.6rem; padding:0 .3rem .6rem}
  .graphe-tete b{
    font-family:var(--display); font-variation-settings:"SOFT" 60,"opsz" 40;
    font-weight:600; font-size:1.45rem; letter-spacing:-.02em;
  }
  .graphe-tete span{font-size:.8rem; color:rgba(var(--encre-rgb),.55)}
  .pct{margin-left:auto; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
       background:var(--pale); color:var(--profond); border-radius:999px; padding:.2rem .6rem}
  .zoom{display:flex; gap:.35rem; justify-content:center; padding:.55rem 0 .1rem}
  .zoom button{
    border:1px solid var(--trait); background:var(--brume); cursor:pointer; border-radius:999px;
    padding:.28rem .8rem; font-size:.74rem; font-weight:600; color:rgba(var(--encre-rgb),.6);
  }
  .zoom button.on{background:var(--pale); border-color:var(--sauge); color:var(--profond)}
  /* FR-SAN-7 : cette phrase est « non dissimulable ». Sa couleur était écrite
   * en dur dans sante.js (`rgba(36,56,43,.6)`), donc sombre sur fond sombre :
   * 1,2:1 en mode nuit, c'est-à-dire invisible. Elle passe par le jeton
   * d'encre comme le reste du texte secondaire. */
  .phrase-reperes{
    margin:.7rem .3rem 0; font-size:.78rem; line-height:1.5;
    color:rgba(var(--encre-rgb),.75);
  }
  .legende-oms{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.7rem; font-size:.74rem; color:rgba(var(--encre-rgb),.6)}
  .legende-oms i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:.35rem; vertical-align:.2em}
  .mesure{display:flex; align-items:center; gap:.8rem; padding:.75rem .9rem; border-bottom:1px solid var(--trait)}
  .mesure:last-child{border-bottom:none}
  .mesure-date{flex:none; width:78px; font-size:.8rem; color:rgba(var(--encre-rgb),.6); font-variant-numeric:tabular-nums}
  .mesure-val{flex:1; font-size:.92rem; font-variant-numeric:tabular-nums}
  .mesure-val b{font-weight:600}
  .mesure-val em{font-style:normal; color:rgba(var(--encre-rgb),.45)}
  .champs{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
  .champs > div:first-child{grid-column:1 / -1}

  /* ---------- Barre d'onglets ---------- */
  .onglets{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; background:rgba(var(--creme-rgb),.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--trait); padding-bottom:env(safe-area-inset-bottom);
  }
  .onglet{
    position:relative; flex:1; border:none; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    padding:.6rem .2rem .55rem; color:rgba(var(--encre-rgb),.48);
    font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    transition:color .18s;
  }
  .onglet svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .onglet.on{color:var(--profond)}
  .onglet.on::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--profond);
  }

  footer{
    margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--trait);
    font-size:.8rem; line-height:1.6; color:rgba(var(--encre-rgb),.55);
  }

  @media (max-width:420px){
    .onglet{font-size:.52rem; letter-spacing:.03em; padding-left:.1rem; padding-right:.1rem}
    .onglet svg{width:21px; height:21px}
  }
  /* Cinq onglets à 320 px : 64 px chacun. Le libellé passe sous la barre des
   * 6 caractères, d'où la coupure autorisée plutôt qu'un débordement. */
  @media (max-width:360px){
    .onglet{font-size:.48rem; letter-spacing:0; overflow-wrap:anywhere}
    .onglet svg{width:19px; height:19px}
  }
  @media (min-width:640px){
    .panneau{padding:1.9rem 2rem 2rem; border-radius:26px}
    .chip{width:68px}
    .onglet{font-size:.66rem}
  }
  @media (prefers-reduced-motion:reduce){
    .vue, .pouls{animation:none}
    .chip, .plus{transition:none}
  }

/* ---------- 4. Écran de connexion (FR-AUTH-1) ---------------------------
 * Absent de la maquette : construit sur les mêmes variables, sans nouvelle
 * couleur. Il occupe tout l'écran et masque la barre d'onglets tant que la
 * session n'est pas ouverte.
 */
  body.hors-session .onglets,
  body.hors-session .flottants{display:none}
  body.hors-session{padding-bottom:0}

  .connexion{
    display:none; position:relative; z-index:1;
    min-height:100svh; max-width:26rem; margin:0 auto;
    padding:clamp(2rem,12vh,6rem) var(--marge) 2rem;
  }
  body.hors-session .connexion{display:block}
  body.hors-session .page{display:none}

  .connexion .prenom{font-size:clamp(2.4rem,11vw,3.6rem); margin-bottom:.6rem}
  .connexion label{
    display:block; margin:1.4rem 0 .35rem;
    font-size:.72rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--profond);
  }
  .connexion input, .connexion select{
    width:100%; padding:.85rem .95rem; font:inherit; color:inherit;
    background:var(--creme); border:1px solid var(--trait); border-radius:14px;
  }
  .connexion .btn{width:100%; margin-top:1.6rem; justify-content:center}
  .connexion .erreur{
    margin:1rem 0 0; padding:.75rem .9rem; border-radius:12px;
    background:var(--abricot-pale); border:1px solid var(--abricot);
    font-size:.92rem;
  }
  .connexion .erreur[hidden]{display:none}

/* ---------- 8 bis. Onglet Réglages ---------------------------------------
 * Deux sections, une carte par réglage. Rien de neuf dans la charte : mêmes
 * fonds, mêmes bordures et mêmes champs que les formulaires existants.
 */
  .carte-reglage{
    background:var(--creme); border:1px solid var(--trait); border-radius:18px;
    padding:1rem 1.1rem 1.1rem; margin-bottom:.9rem;
  }
  .carte-reglage label{
    display:block; margin-bottom:.35rem;
    font-size:.72rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--profond);
  }
  .carte-reglage .sous{margin:0 0 .8rem}
  .carte-reglage .btn{width:auto}
  .carte-reglage .form-actions{margin-top:.9rem}
  .aide{
    margin:.6rem 0 0; font-size:.82rem; line-height:1.45;
    color:rgba(var(--encre-rgb),.7);
  }
  .champ-unite{display:flex; align-items:center; gap:.5rem}
  .champ-unite input{
    width:7rem; padding:.7rem .8rem; font:inherit; color:inherit;
    background:var(--brume); border:1px solid var(--trait); border-radius:12px;
    font-variant-numeric:tabular-nums;
  }
  .champ-unite span{font-size:.9rem; color:rgba(var(--encre-rgb),.7)}

  /* Champs texte des cartes de réglage : la phrase de passe, seule saisie
   * pleine largeur de cet onglet. Même habillage que .champ-unite input, dont
   * seule la largeur fixe ne convenait pas ici. */
  .carte-reglage input[type=password],
  .carte-reglage input[type=text]{
    display:block; width:100%; padding:.7rem .8rem; margin-bottom:.7rem;
    font:inherit; color:inherit;
    background:var(--brume); border:1px solid var(--trait); border-radius:12px;
  }

  /* Bascule « dynamique / fixe » : un bouton qui porte son état, et à côté la
   * valeur que ce choix produit aujourd'hui — sans quoi « Dynamique » ne dit
   * pas grand-chose à qui prépare un biberon. */
  .bascule-mode{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
  .bascule-mode .btn{width:auto}
  .valeur-mode{
    font-size:.9rem; color:rgba(var(--encre-rgb),.7);
    font-variant-numeric:tabular-nums;
  }

  /* Liste des comptes. Une ligne par personne : le prénom, sa qualité, et les
   * gestes réservés aux administrateurs. */
  .liste-comptes{list-style:none; margin:0; padding:0}
  .liste-comptes li{
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    padding:.65rem 0; border-top:1px solid var(--trait);
  }
  .liste-comptes li:first-child{border-top:0}
  .liste-comptes .nom-compte{font-weight:600; margin-right:auto}
  .liste-comptes .etiquette{
    font-size:.68rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--etiquette);
    padding:.15rem .45rem; border:1px solid var(--trait); border-radius:999px;
  }
  .liste-comptes .btn{width:auto; padding:.4rem .7rem; font-size:.8rem}
  .liste-comptes .vide{
    padding:.65rem 0; color:rgba(var(--encre-rgb),.7); font-size:.9rem;
  }

/* ---------- 9 bis. Bandeaux, brouillons et file d'envoi -----------------
 * Le bandeau d'annulation (FR-DEV-8) et les messages d'erreur (FR-UI-6)
 * partagent la même mécanique : un seul élément, en bas d'écran, au-dessus
 * de la barre d'onglets.
 */
  .bandeau{
    position:fixed; left:50%; transform:translateX(-50%) translateY(0);
    bottom:calc(var(--barre) + .7rem); z-index:40;
    display:flex; align-items:center; gap:.9rem;
    max-width:min(34rem, calc(100vw - 2rem));
    padding:.7rem .8rem .7rem 1rem; border-radius:16px;
    background:var(--encre); color:var(--creme);
    box-shadow:0 10px 30px rgba(var(--encre-rgb),.28);
    font-size:.92rem; line-height:1.35;
    animation:monte .22s cubic-bezier(.2,.7,.3,1) both;
  }
  .bandeau[hidden]{display:none}
  .bandeau button{
    flex:none; padding:.35rem .8rem; border-radius:10px; cursor:pointer;
    background:transparent; border:1px solid rgba(251,250,247,.45);
    color:inherit; font-weight:700; font-size:.86rem;
  }
  .bandeau button:hover{background:rgba(251,250,247,.14)}
  .bandeau.alerte{background:var(--sur-abricot-fort)}
  @keyframes monte{from{opacity:0; transform:translateX(-50%) translateY(10px)}
                   to{opacity:1; transform:translateX(-50%) translateY(0)}}

/* Une écriture partie dans la file hors ligne (FR-NF-4) : la ligne existe déjà
 * à l'écran, elle est seulement marquée. Jamais de disparition puis
 * réapparition, qui donnerait l'impression d'une perte. */
  .en-attente{opacity:.62}
  .en-attente::after{
    content:"en attente d'envoi"; display:inline-block; margin-left:.5rem;
    padding:.1rem .45rem; border-radius:7px; vertical-align:middle;
    background:var(--abricot-pale); border:1px solid var(--abricot);
    font-size:.66rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--sur-abricot-fort);
  }

/* ---------- 2 bis. Mode sombre ------------------------------------------
 * SEAM L6 — le jeu de variables alternatif sous prefers-color-scheme: dark
 * se pose ici (FR-NF-3). Redéfinir les variables de :root et rien d'autre :
 * toutes les règles ci-dessus les lisent déjà. Fonds sombres désaturés
 * dérivés de la même palette, pas de blanc pur — c'est une exigence d'usage
 * nocturne, la tétée de 3 h se saisit sur cet écran-là.
 *
 * Contraste (FR-NF-5). Les valeurs ci-dessous sont mesurées, pas estimées :
 * `tests/contraste.test.mjs` calcule le rapport réel de chaque texte visible
 * contre son fond effectif, dans les deux thèmes.
 *
 * `--encre` #8FA08A rend 5,4:1 sur `--creme`, 6,2:1 sur `--brume`, 4,9:1 sur
 * `--pale` ; `--profond` #6BA378 rend 5,1:1 sur `--creme`. Les valeurs
 * précédentes (#7C8C78 et #5C9169) tombaient à 4,2:1 et 4,1:1 — sous le seuil
 * AA du texte courant.
 *
 * Les variantes `-pale` deviennent ici des fonds sombres teintés, et les
 * textes qui se posent dessus passent par les jetons `--sur-*`. C'est ce qui
 * permet de ne pas laisser d'aplat clair au milieu d'un écran sombre.
 */
  @media (prefers-color-scheme:dark){
    :root{
      --encre:#8FA08A;
      /* L'encre s'inverse : les textes secondaires deviennent clairs sur fond
       * sombre, en conservant les mêmes opacités relatives. */
      --encre-rgb:214,226,209;
      /* Les surfaces semi-transparentes suivent le fond, sinon la barre
       * d'onglets et le rail des semaines restent des bandeaux clairs
       * portant du texte clair. */
      --creme-rgb:33,40,34;
      --brume-rgb:23,28,24;
      /* Le halo se contente d'un souffle : sur fond sombre, deux aplats verts
       * pâles font une tache laiteuse en haut de l'écran. */
      --halo-a:#1E2A20;
      --halo-b:#1B241C;
      --profond:#6BA378;
      /* Reste sombre : c'est un fond, pas un texte. #F2F8F0 dessus rend
       * 5,7:1, là où le vert de texte #6BA378 ne rendrait que 2,7:1. */
      --plein:#3E6B4A;
      --etiquette:#8FAE8B;   /* la sauge d'origine : 6,2:1 sur fond sombre */
      --pale:#25302A;
      --brume:#171C18;
      --creme:#212822;
      /* Les variantes pâles deviennent des fonds sombres teintés, comme
       * --pale : un aplat clair au milieu d'un écran sombre est un phare, et
       * le texte posé dessus redevient illisible dès qu'il s'éclaircit. */
      --abricot-pale:#3A2B1E;
      --bleu-pale:#1E2C33;
      --lavande-pale:#2A2435;
      --sur-abricot:#E2B183;
      --sur-abricot-fort:#F0C9A4;
      --sur-bleu:#A9C6D1;
      --sur-lavande:#C7BBDA;
      --trait:rgba(220,230,214,.16);
    }
  }

  @media (prefers-reduced-motion:reduce){
    .bandeau{animation:none}
  }