:root {
  /* Palette PARTAGEE avec l'app devis : meme teinte (H=264), memes valeurs.
     Chaque ligne est la conversion exacte du token oklch de
     `atlantique-bale/src/app/globals.css` — si l'un bouge, l'autre suit.
       --accent  = --primary          oklch(.32 .098 264)
       --texte   = --foreground       oklch(.217 .034 264)
       --doux    = --muted-foreground oklch(.506 .046 264)
       --trait   = --border           oklch(.916 .008 264)
       --fond    = --muted            oklch(.968 .006 264)
       --accent-pale = --accent (devis) oklch(.95 .02 264)
     L'ancien #1f2a54 etait un a-peu-pres du bleu des devis : plus violace et plus
     sombre que la barre de l'autre appli, cote a cote ca se voyait. */
  --fond: #f2f4f9;
  --carte: #fff;
  --texte: #121a2a;
  --doux: #586580;
  --trait: #e0e3e9;
  --accent: #182f64;
  --accent-fonce: #0e214c;
  --accent-pale: #e8effc;
  --ok: #0f7b4f;
  /* une ombre basse plutot qu'un trait sec : les cartes se posent sur le fond au lieu
     de le quadriller. Deux couches, la seconde tres large et tres pale. */
  --ombre: 0 1px 2px rgba(20, 25, 42, .05), 0 6px 16px rgba(20, 25, 42, .05);
  --survol: #f5f7fb;
  /* le chevron des <select> : dessine ici pour que sa couleur reste collee a --doux
     (une data-URI ne peut pas lire var(), donc le %23586580 est le seul endroit ou
     la palette est recopiee a la main). */
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586580' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
}
main { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 1.25rem 0 .5rem; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 1.5rem 0 .5rem; }
.sous { color: var(--doux); margin: 0 0 1rem; font-size: .9rem; }
.vide { color: var(--doux); font-style: italic; }
a { color: var(--accent); }

/* Bandeau repris de l'app devis, a l'identique : une barre marine collante de 56 px,
   le nom en texte a gauche, les liens en boutons bordes a droite, l'action principale
   en bouton blanc plein, puis le compte et la deconnexion en icone. Rien ne joue a
   l'estompe : un texte blanc plein est plus net qu'un gris translucide. */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.barre {
  display: flex; align-items: center; gap: .4rem;
  height: 56px; max-width: 900px; margin: 0 auto; padding: 0 1rem;
}
.marque {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1;
  color: #fff; text-decoration: none; padding-right: .5rem; white-space: nowrap;
}
.sprite { display: none; }
.ico {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

header nav { display: flex; align-items: center; gap: .375rem; margin-left: auto; }
.lien-barre {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .4rem .7rem; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: .875rem; font-weight: 500; color: #fff; text-decoration: none;
}
.lien-barre:hover { background: rgba(255, 255, 255, .15); }
.lien-barre.actif { background: rgba(255, 255, 255, .18); border-color: transparent; }
/* l'action principale en blanc plein, comme « Nouveau devis » cote devis */
.lien-barre.plein { background: #fff; color: var(--accent); border-color: #fff; font-weight: 600; }
.lien-barre.plein:hover { background: rgba(255, 255, 255, .9); }

.compte { display: flex; align-items: center; gap: .5rem; margin-left: .25rem; }
.compte span { font-size: .875rem; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.compte button {
  display: inline-flex; padding: .45rem; color: #fff;
  background: none; border: 0; border-radius: 6px;
}
.compte button:hover { background: rgba(255, 255, 255, .15); }

/* Sous 640 px les libelles tombent, les icones restent : la barre tient sur UNE ligne
   au telephone, au lieu des deux rangs qu'il fallait avant. */
@media (max-width: 640px) {
  /* masque a l'oeil, PAS au lecteur d'ecran : `display: none` aurait prive chaque
     bouton de son nom, et il ne reste qu'une icone sur cet ecran. */
  .lien-barre > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .lien-barre { padding: .45rem .6rem; }
}
@media (max-width: 768px) { .compte span { display: none; } }

.flash {
  background: #e8f4ed; border-left: 4px solid var(--ok);
  padding: .6rem .8rem; margin: 0 0 1rem; border-radius: 4px;
}

.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 12px; padding: 1.15rem; margin-bottom: 1rem; box-shadow: var(--ombre);
}
label { display: block; margin-bottom: .9rem; font-weight: 600; }
input[type=text], input[type=password], input[type=date], input[type=time],
select, textarea {
  display: block; width: 100%; margin-top: .35rem;
  padding: .7rem .8rem; font: inherit; font-weight: 400;
  border: 1px solid var(--trait); border-radius: 8px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
/* Le menu deroulant natif (fleche systeme, hauteur variable selon l'OS) jurait avec
   le reste. On ne remplace QUE le bouton : la liste qui s'ouvre reste celle du systeme,
   donc rien a reimplementer et le clavier garde son comportement. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.3rem; cursor: pointer;
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right .65rem center;
  background-size: 15px;
}
select:hover { border-color: var(--doux); }

/* La LISTE qui s'ouvre, elle, est dessinee par le systeme : blanche, carree, avec ses
   propres marges. Sur Chrome et Edge recents, `base-select` la rend stylable comme du
   HTML ordinaire — ailleurs (Safari, Firefox) la regle est ignoree et le menu systeme
   reste tel quel : meme fonctionnement, seul l'habillage change. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select {
    display: flex; align-items: center; gap: .5rem;
    background-image: none; padding-right: .65rem;   /* le chevron devient un vrai element */
  }
  /* le triangle plein par defaut jure avec le reste : on remet le meme chevron */
  select::picker-icon {
    content: ""; width: 15px; height: 15px; margin-left: auto;
    background: var(--chevron) no-repeat center / 15px;
    transition: rotate .15s ease;
  }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: var(--accent); }

  ::picker(select) {
    border: 1px solid var(--trait); border-radius: 10px;
    padding: .25rem; margin-top: .3rem; background: var(--carte);
    box-shadow: 0 10px 28px rgba(20, 25, 42, .16);
  }
  option {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .6rem; border-radius: 7px; font: inherit; color: var(--texte);
  }
  option:hover, option:focus { background: var(--accent-pale); outline: none; }
  option:checked { font-weight: 600; color: var(--accent); }
  option::checkmark { content: "✓"; color: var(--accent); order: 1; margin-left: auto; }
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-pale);
}
/* le clavier doit voir ou il est, partout et sans exception */
a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
textarea { resize: vertical; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

button, .bouton {
  display: inline-block; padding: .8rem 1.2rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--accent); border: 0; border-radius: 9px;
  text-decoration: none; cursor: pointer; transition: background .12s, transform .06s;
}
button:hover, .bouton:hover { background: var(--accent-fonce); }
button:active, .bouton:active { transform: translateY(1px); }
button.lien {
  background: none; color: var(--accent); padding: 0;
  font-weight: 400; text-decoration: underline;
}
button.lien:hover { background: none; color: var(--accent-fonce); }

fieldset {
  border: 1px solid var(--trait); border-radius: 10px;
  padding: .9rem; margin: 0 0 1.15rem; background: var(--carte);
}
.libre { margin: 0; font-weight: 400; color: var(--doux); font-size: .9rem; }
.libre input, input.libre { font-size: 1rem; color: var(--texte); }
legend { font-weight: 700; font-size: .95rem; color: var(--accent); padding: 0 .4rem; }
.cases {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: .4rem; margin-bottom: .75rem;
}
.case {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .6rem .7rem; font-weight: 400;
  border: 1px solid var(--trait); border-radius: 8px; background: #fff;
  cursor: pointer;
}
.case input { width: 20px; height: 20px; accent-color: var(--accent); }
.case:hover { border-color: var(--doux); }
.case:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }

/* Le bilan, ouvert et fige ; le detail, replie derriere son titre. Un depliant se
   voit comme tel : le triangle et le fond appuye du titre suffisent, sans phrase. */
.bloc {
  border: 1px solid var(--trait); border-radius: 12px;
  padding: 0 1rem 1rem; margin-bottom: 1.75rem; background: var(--carte);
  box-shadow: var(--ombre);
}
.bloc > h2 { margin-top: 1rem; }
.bloc > h3 { font-size: .95rem; color: var(--doux); margin: 1.25rem 0 .4rem; }
details.bloc > summary {
  margin: 0 -1rem; padding: .8rem 1rem; font-weight: 600;
  border-radius: 11px 11px 0 0; cursor: pointer;
}
details.bloc[open] > summary { border-bottom: 1px solid var(--trait); }
/* replie, le bloc n'est plus que son titre : sans ca, le padding du bas laissait une
   bande vide sous le titre colore. */
details.bloc:not([open]) { padding-bottom: 0; }
details.bloc:not([open]) > summary { border-radius: 11px; }
details.bloc > summary:hover { background: var(--accent-pale); }
.bandeau {
  margin: 0 -1rem 0; padding: .55rem 1rem; font-size: .85rem;
  border-bottom: 1px solid var(--trait);
}
.filtre > .bandeau { background: #f5f7fb; color: var(--doux); }
/* la barre de filtres vit DANS son bloc : plus de carte dans la carte. `box-shadow`
   compris — l'ombre ajoutee au design general redessinait le rectangle qu'on venait
   justement d'enlever, et la barre flottait dans le bloc. */
.bloc .filtres {
  border: 0; background: transparent; padding: 1rem 0; box-shadow: none;
  border-radius: 0;
}

/* Les deux dates au jour pres : repliees, en retrait, elles ne se disputent plus la
   vedette avec le menu de periode qui fait le travail neuf fois sur dix. */
.filtres .dates { flex: 1 1 100%; font-size: .9rem; }
.filtres .dates > summary { color: var(--doux); cursor: pointer; padding: .2rem 0; }
.filtres .dates[open] > summary { margin-bottom: .5rem; }
.filtres .dates label { display: inline-block; margin-right: .75rem; font-weight: 400;
                        color: var(--doux); }
.filtres .dates input { display: inline-block; width: auto; margin: 0 0 0 .3rem;
                        padding: .4rem .5rem; font-size: .9rem; }

.filtres {
  display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 12px; padding: 1rem; margin-bottom: 1rem; box-shadow: var(--ombre);
}
/* libelle et menu sur une ligne : empiles, trois filtres faisaient une carte de
   180 px de haut pour trois listes deroulantes. */
.filtres label {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .95rem; white-space: nowrap;
}
.filtres select, .filtres input { width: auto; margin-top: 0; padding: .55rem .7rem; }
/* le raccourci `padding` ci-dessus ecrasait la place reservee au chevron : le libelle
   passait dessous et touchait le bord. On la repose explicitement. */
.filtres select { padding-right: 2.3rem; }
/* un menu se cale sur son option la plus longue : « Compacteur (location semaine) »
   etirait le filtre Materiel sur la moitie de la barre et poussait l'export a la ligne */
.filtres select { max-width: 11rem; }   /* « Tout le monde » + le chevron, et l'export tient au bout */
/* l'export reste au bout de la barre — et assez compact pour y tenir : plus gros,
   il passait a la ligne et laissait un vide de la largeur de l'ecran a sa gauche. */
.filtres .bouton { margin-left: auto; padding: .6rem 1rem; font-size: .95rem; }

/* les cases libres empilees, et le bouton qui en ajoute une */
.libres { display: grid; gap: .4rem; }
.libres input { margin-top: 0; }
button.encore {
  margin-top: .5rem; padding: .5rem .8rem; font-size: .9rem;
  color: var(--accent); background: var(--accent-pale); border: 1px solid var(--trait);
}
button.encore:hover { color: #fff; background: var(--accent); }

.tableau {
  overflow-x: auto; background: var(--carte); border: 1px solid var(--trait);
  border-radius: 12px; box-shadow: var(--ombre);
}
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
/* minuscules, comme l'app devis : sur un tableau dense, un entete en capitales
   espacees se lit moins vite qu'un gras sobre — et il criait sur chaque tableau. */
th { background: var(--accent-pale); font-size: .84rem; font-weight: 700; color: var(--accent); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--survol); }
tbody tr.fort:hover td { background: var(--accent-pale); }
.nowrap { white-space: nowrap; }


/* largeur auto : avec un seul mois, le chiffre reste colle au nom de l'outil.
   `>` obligatoire : sans lui ces largeurs s'appliquaient AUSSI aux cellules du petit
   tableau mensuel imbrique, qui reclamait alors 12 x 96 px et faisait defiler la page. */
table.totaux > tbody > tr > td:first-child,
table.totaux > thead > tr > th:first-child { min-width: 190px; }
table.totaux > thead > tr > th.nombre,
table.totaux > tbody > tr > td.nombre { min-width: 96px; }
.nombre { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.fort td { font-weight: 700; background: var(--accent-pale); }

/* Le second affichage : 12 colonnes de mois pour UNE annee. Les colonnes se
   resserrent, sinon la page part en defilement des le bureau. */
.retour { font-size: .95rem; }
table.totaux > thead > tr > th a { color: inherit; }
/* 12 colonnes : tout se resserre, sinon la moitie de l'annee nait hors de l'ecran */
table.mois12 { font-size: .85rem; }
table.mois12 > thead > tr > th, table.mois12 > tbody > tr > td { padding: .45rem .3rem; }
table.mois12 > thead > tr > th:first-child,
table.mois12 > tbody > tr > td:first-child { min-width: 130px; }
table.mois12 > thead > tr > th.nombre,
table.mois12 > tbody > tr > td.nombre { min-width: 44px; }

/* le cumul annuel se lit d'un coup d'oeil : c'est lui qu'on cherche en fin d'annee */
table.totaux .annee { font-weight: 700; border-left: 2px solid var(--trait); }

/* « cette journee a deja ete notee » : ambre, il faut le lire avant de decocher */
.deja {
  background: #fdf6e3; border-left: 4px solid #b8860b;
  padding: .7rem .85rem; margin: 0 0 1rem; border-radius: 4px;
  font-size: .93rem;
}

/* Un materiau = UNE boite. La quantite vit dedans, calee a droite, et non dans un
   second cadre a cote : deux cadres accoles donnaient des lignes de largeurs inegales
   selon que la case etait cochee ou non. */
.cases.qtes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.case-qte {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding-right: .7rem;
  border: 1px solid var(--trait); border-radius: 8px; background: #fff;
}
.case-qte > .case { flex: 1 1 auto; min-width: 0; border: 0; background: none; }
.case-qte:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }
.case-qte:has(input:checked) > .case { background: none; }
input.qte {
  flex: 0 0 3.6rem; width: 3.6rem; margin-top: 0;
  padding: .35rem .3rem; text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--trait); border-radius: 6px; background: #fff;
}
input.qte:focus { border-color: var(--accent); outline: none; }
.unite { flex: 0 0 auto; font-size: .82rem; color: var(--doux); }
/* La quantite n'apparait que sur un materiau coche : une colonne de « qte » vides
   en face de tout ce qui n'a pas servi n'apprend rien et alourdit l'ecran.
   Sous @supports : sans :has(), le champ reste visible plutot que perdu. */
@supports selector(:has(input)) {
  .case-qte:not(.libre-qte) > input.qte,
  .case-qte:not(.libre-qte) > .unite { display: none; }
  .case-qte:has(input:checked) > input.qte { display: block; }
  .case-qte:has(input:checked) > .unite { display: inline; }
}
/* Une ligne tapee a la main n'a pas de case a cocher : sa quantite est toujours la,
   c'est le nom qui dit s'il y a quelque chose. */
.libre-qte { padding-left: .55rem; }
.libre-qte > input[type=text] {
  flex: 1 1 auto; min-width: 0; margin: 0;
  border: 0; background: none; padding: .6rem .15rem;
}
.libre-qte > input[type=text]:focus { outline: none; box-shadow: none; }
.libre-qte:focus-within { border-color: var(--accent); }
.liste i { font-style: normal; color: var(--doux); }

.recentes {
  list-style: none; margin: 0; padding: .25rem 1rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre);
}
.recentes li { padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.recentes li:last-child { border-bottom: 0; }

.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.ajout { display: flex; gap: .5rem; margin-bottom: .75rem; max-width: 32rem; }
/* L'oeil vit DANS le champ, comme l'app de devis : pose a cote, il volait la largeur
   du champ sur un telephone. `flex: 1` sur l'enveloppe, sinon le champ se retracte a
   sa taille par defaut des qu'il n'est plus l'enfant direct du `.ajout`. */
.mdp { position: relative; display: block; flex: 1; }
.mdp input { padding-right: 2.8rem; }
.mdp .oeil {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  display: flex; padding: .35rem; background: none; border: 0;
  color: var(--doux); border-radius: 6px;
  /* `width: auto` explicite : sous 640 px, la regle `button { width: 100% }` etirait
     l'oeil sur toute la largeur du champ — il devenait une zone cliquable invisible. */
  width: auto;
}
.mdp .oeil:hover { background: var(--fond); color: var(--texte); }
.mdp .oeil:active { transform: translateY(-50%); }   /* pas de saut : il est centre */
.ajout input { margin-top: 0; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--trait);
}
.liste li.inactif span { color: var(--doux); text-decoration: line-through; }
.liste .off { color: var(--doux); font-size: .82rem; }

/* Ecrans tactiles (telephone, tablette) : rien de cliquable sous ~44 px, sinon on
   vise a cote avec le pouce. Le bureau garde ses hauteurs compactes. */
@media (pointer: coarse) {
  .lien-barre { padding: .6rem .75rem; }
  /* l'oeil au doigt : 16 px d'icone + 2x12 px de marge = 40 px de cible, sans deborder
     du champ (44 px de haut). Il reste dans le champ, `width: auto` s'en charge. */
  .mdp .oeil { padding: .75rem; }
  .compte button { padding: .6rem; }
  input.qte { padding: .78rem .4rem; }
  .tableau td a { display: inline-block; padding: .6rem 0; }
  .recentes li { padding: 0; }
  .recentes li a { display: block; padding: .7rem .2rem; }
  .liste button.lien, .ajout button { padding: .55rem 0; }
  .liste button.lien { padding: .55rem .2rem; }
  .ajout button { padding: .55rem 1.1rem; }
}

/* Encoche et barre de gestes : le bandeau va jusqu'au bord, le contenu jamais dessous */
@supports (padding: env(safe-area-inset-left)) {
  .barre { padding-left: max(1rem, env(safe-area-inset-left));
           padding-right: max(1rem, env(safe-area-inset-right)); }
  main { padding-left: max(1rem, env(safe-area-inset-left));
         padding-right: max(1rem, env(safe-area-inset-right));
         padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  /* deux heures tiennent cote a cote meme sur un telephone : les empiler ajoutait
     un ecran de defilement avant d'atteindre l'equipe. */
  .duo.heures { grid-template-columns: 1fr 1fr; }
  /* les filtres repassent en libelle AU-DESSUS du champ : cote a cote, chaque menu
     commencait a un x different selon la longueur du mot, et rien n'etait aligne. */
  .filtres label { display: block; flex: 1 1 100%; }
  .filtres select { width: 100%; max-width: none; margin-top: .3rem; }
  /* la barre doit tenir sur UNE ligne jusqu'a 360 px : on resserre le nom et les
     boutons plutot que de cacher un onglet — aucune page ne doit devenir inatteignable
     au telephone. Les cibles restent a ~36 px de haut. */
  .marque { padding-right: .25rem; }   /* le nom garde sa taille : c'est la marque */
  header nav { gap: .25rem; }
  .lien-barre { padding: .55rem .5rem; }
  .compte button { padding: .55rem .4rem; }
  .barre { gap: .25rem; padding: 0 .75rem; }
  .duo { grid-template-columns: 1fr; }
  /* lignes basses sur telephone : on fait defiler le tableau au lieu de le replier */
  .tableau th, .tableau td { white-space: nowrap; }
  /* sauf les totaux : leurs 3 colonnes doivent tenir d'un coup, sinon le mois le plus
     recent — le seul qu'on regarde — nait hors de l'ecran. On plie les mots. */
  table.totaux { font-size: .82rem; }
  table.totaux th, table.totaux td { white-space: normal; padding: .5rem .4rem; }
  table.totaux > thead > tr > th:first-child,
  table.totaux > tbody > tr > td:first-child { min-width: 0; width: 32%; }
  table.totaux > thead > tr > th.nombre,
  table.totaux > tbody > tr > td.nombre { min-width: 0; }
  button, .bouton { width: 100%; text-align: center; }
  .ajout button, .compte button { width: auto; }
}

/* Les 320 px (vieil iPhone SE) : le nom garde sa taille — c'est la marque — donc ce
   sont les boutons qui se resserrent. Rien ne disparait de la barre. */
@media (max-width: 340px) {
  .lien-barre { padding: .55rem .35rem; }
}

/* ---------------------------------------------------------- calendrier maison
   Le panneau de <input type="date"> est un widget du navigateur, hors page : aucun
   selecteur ne l'atteint. `static/calendrier.js` le remplace A LA SOURIS seulement
   (au doigt, le selecteur du telephone est meilleur) et pose `.cal-maison` sur <html>
   — tout ce qui suit ne s'applique donc jamais sur mobile. */
.cal-maison .cal-hote { position: relative; display: block; }
/* l'icone native disparait : c'est notre bouton qui ouvre, sinon les deux calendriers
   s'ouvriraient l'un sur l'autre. */
.cal-maison input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.cal-maison input[type=date] { padding-right: 2.6rem; }
.cal-bouton {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--doux); cursor: pointer;
}
.cal-bouton:hover { background: var(--accent-pale); color: var(--accent); }
.cal-bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cal-hote.ouvert .cal-bouton { background: var(--accent-pale); color: var(--accent); }

.cal-panneau {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
  width: 17.5rem; padding: .6rem; font-weight: 400;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(20, 25, 42, .06), 0 12px 28px rgba(20, 25, 42, .14);
}
/* colle au bord droit quand le champ touche la fin de l'ecran (les filtres Du/Au) */
@media (max-width: 480px) { .cal-panneau { left: auto; right: 0; } }
.cal-tete { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .45rem; }
.cal-tete strong { font-size: .95rem; color: var(--accent); text-transform: capitalize; }
.cal-fleche {
  width: 1.9rem; height: 1.9rem; padding: 0; font-size: 1.15rem; line-height: 1;
  color: var(--doux); background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.cal-fleche:hover { background: var(--accent-pale); color: var(--accent); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-nom { padding: .2rem 0 .35rem; text-align: center; font-size: .68rem;
  color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.cal-jour {
  padding: .42rem 0; font: inherit; font-size: .88rem; font-variant-numeric: tabular-nums;
  color: var(--texte); background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.cal-jour:hover { background: var(--survol); }
.cal-jour.hors { color: #b4bacb; }          /* les jours du mois d'a cote, en retrait */
.cal-jour.auj { font-weight: 700; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-pale); }
.cal-jour.pris { background: var(--accent); color: #fff; font-weight: 600; }
.cal-jour.pris:hover { background: var(--accent-fonce); }
.cal-auj {
  width: 100%; margin-top: .5rem; padding: .42rem; font: inherit; font-size: .85rem;
  color: var(--accent); background: var(--accent-pale); border: 0; border-radius: 8px;
  cursor: pointer;
}
.cal-auj:hover { background: #dbe6fa; }

/* --------------------------------------------------- etat de l'enregistrement
   La fiche part toute seule ; cette ligne dit ou on en est. Discrete quand tout va
   bien, coloree quand il faut regarder. Masquee sans JS : c'est le bouton qui fait foi. */
.etat { margin: .6rem 0 0; font-size: .87rem; color: var(--doux); }
.etat.ok { color: var(--ok); }
.etat.attente { color: #a35b00; }
.etat.attention { color: #a35b00; font-weight: 600; }