/* LE CARNET D'ABDEL — dessine depuis son poste de travail, pas depuis un ecran de bureau.
   Debout, une main libre et souvent mouillee, cinq secondes entre deux clients, du soleil
   dans la vitrine. Les vingt partis pris sont annotes la ou ils s'appliquent. */
.fgc-admin{
  overflow-x:hidden;
  --e:#1E1A16;--f:#FFFFFF;--f2:#F5F3EE;--f3:#EDEAE3;--t:#DDD9D0;--tf:#C6C0B4;
  --g:#7C7468;--g2:#4A433B;--or:#9E6C1F;--orv:#F2E7D3;
  --v:#12704C;--vv:#DCEFE6;--r:#8E362D;--rv:#F5E2DF;--a:#7D611A;--av:#F4EBD4;
  max-width:520px;color:var(--e);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
/* ⑨ PLUS DE MODE SOMBRE — Stephane (05/09) : « un fond moins fonce pour cette page agenda ».
   Le parti pris d'origine (un ecran sombre a 7 h 15 dans un salon encore eteint) etait
   defendable ; le rendu, sur son telephone en mode sombre, ne l'a pas convaincu, et c'est le
   rendu qui decide. Cinq peaux claires ont ete proposees, il a garde celle-ci : le meme dessin,
   fond blanc casse chaud, quelle que soit la preference du systeme. Les jetons ci-dessus sont
   la seule palette servie. */
.fgc-admin *{box-sizing:border-box}
.fgc-admin :focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.fgc-admin *{animation-duration:.001ms!important;
  transition-duration:.001ms!important}}

/* ⑱ L'etat du reseau se DIT. La 4G tombe au fond des salons : un carnet fige sans prevenir
   ferait rater un rendez-vous en silence. */
.fgc-hs{background:var(--rv);color:var(--r);border:1px solid var(--r);border-radius:10px;
  padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:12px}

/* ①② La question qu'il se pose en sortant son telephone, et rien d'autre. */
.fgc-tete{background:var(--f);border:1px solid var(--t);border-radius:16px;padding:15px 16px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px -20px rgba(0,0,0,.4);margin-bottom:14px}
.fgc-tete .l{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g);font-weight:700}
.fgc-pt{width:8px;height:8px;border-radius:50%;background:var(--v);position:relative;flex:none}
.fgc-pt::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--v);
  opacity:0;animation:fgcOnde 2.6s ease-out infinite}
@keyframes fgcOnde{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.6);opacity:0}}
/* ⚠️ min-width:0 sur la part qui peut s'allonger : sans lui, un nom long comme
   « Léa (pour Tom, 9 ans) » pousse la ligne au-dela du telephone et le compte a rebours
   sort de l'ecran. Une boite flex refuse de retrecir en dessous de son contenu tant qu'on
   ne le lui autorise pas — defaut vu au rendu, invisible dans le CSS. */
.fgc-tete .qui{font-weight:700;font-size:26px;letter-spacing:-.02em;margin:6px 0 2px;line-height:1.14;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.fgc-tete .qui>span{min-width:0;overflow-wrap:anywhere}
/* ② « dans 12 min » se comprend sans savoir l'heure qu'il est — ce qu'on ignore quand on a
   les mains dans les cheveux de quelqu'un. */
.fgc-tete .qui em{font-style:normal;font:700 15px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--or);white-space:nowrap}
.fgc-tete .quoi{font-size:14px;color:var(--g2)}
.fgc-actes{display:flex;gap:8px;margin-top:12px}

/* ⑥ 52 px au minimum, pas 44 : la norme suppose un doigt pose au calme. */
.fgc-b{flex:1 1 0;min-width:0;min-height:52px;border:1px solid var(--t);background:var(--f2);color:var(--e);
  border-radius:12px;font:600 14.5px inherit;cursor:pointer;display:flex;align-items:center;
  justify-content:center;text-decoration:none;transition:.15s;padding:0 10px;text-align:center}
.fgc-b:hover{border-color:var(--or);color:var(--or);background:var(--orv)}
.fgc-b.fort{background:var(--e);color:var(--f);border-color:transparent}
.fgc-b.fort:hover{filter:brightness(1.25);background:var(--e);color:var(--f)}

.fgc-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fgc-nav .j{flex:1;font-weight:600;font-size:16px;text-align:center}
.fgc-nav .j small{display:block;font-weight:400;font-size:12.5px;color:var(--g)}
/* ⑰ Demain est a un glissement, pas dans un menu : c'est la deuxieme question la plus
   frequente et elle ne merite pas une navigation. */
.fgc-fl{width:52px;min-height:52px;border:1px solid var(--t);background:var(--f);color:var(--e);
  border-radius:12px;font-size:19px;cursor:pointer;flex:none}
.fgc-fl:disabled{opacity:.35;cursor:not-allowed}

.fgc-ligne{display:grid;grid-template-columns:54px 1fr;gap:11px}
.fgc-ligne .hh{font:700 13.5px ui-monospace,Menlo,monospace;color:var(--g);padding-top:12px;
  text-align:right;font-variant-numeric:tabular-nums}
.fgc-ligne .z{border-left:2px solid var(--t);padding:0 0 9px 12px}
/* ④ Ce qui est passe s'estompe mais RESTE : le faire disparaitre l'empecherait de verifier
   qui est venu, et c'est une question qu'on se pose tous les jours. */
.fgc-ligne.passe{opacity:.45}
.fgc-ligne.passe .z{border-left-style:dashed}

.fgc-rdv{border:1px solid var(--t);border-left:4px solid var(--v);background:var(--f);
  border-radius:12px;padding:12px 13px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.fgc-rdv.att{border-left-color:var(--a);background:var(--av)}
/* ⑭ Une nouvelle reservation se signale sans crier : assez pour attirer l'oeil, pas assez
   pour ressembler a une alarme. */
.fgc-rdv.neuf{box-shadow:0 0 0 3px var(--av),0 1px 2px rgba(0,0,0,.05)}
.fgc-rdv .n{font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:8px;
  align-items:baseline;line-height:1.25;flex-wrap:wrap}
.fgc-rdv .n>span{min-width:0;overflow-wrap:anywhere}
.fgc-rdv .n em{font-style:normal;font:600 11.5px ui-monospace,Menlo,monospace;color:var(--g);
  white-space:nowrap}
.fgc-rdv .p{font-size:13.5px;color:var(--g2);margin-top:3px;overflow-wrap:anywhere}
.fgc-rdv .act{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}

.fgc-m{border:1px solid var(--t);background:var(--f2);color:var(--g2);border-radius:10px;
  padding:0 14px;min-height:52px;font:600 14px inherit;cursor:pointer;display:inline-flex;
  align-items:center;text-decoration:none;position:relative;overflow:hidden;flex:1 1 auto;
  justify-content:center;min-width:0;white-space:nowrap}
/* ⑪ Confirmer d'un tap : une fenetre de confirmation sur un geste fait dix fois par jour
   n'est pas une securite, c'est un peage. */
.fgc-m.oui{border-color:var(--v);color:var(--v);background:var(--vv)}
/* ⑫ Mais annuler demande un APPUI MAINTENU — c'est le seul geste qui decoit un client, et
   un pouce mouille ne doit pas pouvoir le declencher au passage. La barre montre le temps
   qu'il reste a tenir : un appui sans retour visible se lache avant d'aboutir. */
.fgc-m.non{border-color:var(--t);color:var(--g2)}
.fgc-m.non .jauge{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rv);z-index:0}
.fgc-m.non.tient{border-color:var(--r);color:var(--r)}
.fgc-m.non.tient .jauge{width:100%;transition:width .7s linear}
.fgc-m span{position:relative;z-index:1}

/* ⑤ Les creneaux libres sont AFFICHES : un trou a 14 h n'est pas du vide, c'est une
   information commerciale et parfois une decision. */
.fgc-libre{border:1px dashed var(--tf);border-radius:12px;padding:11px 13px;color:var(--g);
  font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:repeating-linear-gradient(135deg,transparent 0 7px,var(--f2) 7px 14px);min-height:52px}
.fgc-libre button{border:1px solid var(--t);background:var(--f);color:var(--g2);border-radius:9px;
  padding:0 14px;min-height:40px;font:600 13.5px inherit;cursor:pointer;flex:none}
.fgc-libre button:hover{border-color:var(--or);color:var(--or)}

/* ③ La ligne « maintenant » traverse la journee : il voit d'un coup ce qui est fait et ce
   qui vient, sans lire une date. */
.fgc-now{display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:center;margin:3px 0 11px}
.fgc-now .et{font:700 11.5px ui-monospace,Menlo,monospace;color:var(--r);text-align:right}
.fgc-now .tr{height:2px;background:var(--r);border-radius:2px;position:relative}
.fgc-now .tr::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--r)}

.fgc-statuts{display:flex;gap:7px;margin:16px 0 12px}
.fgc-s{flex:1;min-height:56px;border:1px solid var(--t);background:var(--f);border-radius:12px;
  cursor:pointer;font:600 13.5px inherit;color:var(--g2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;transition:.15s}
.fgc-s b{font-size:15px;line-height:1;font-weight:400}
.fgc-s[aria-pressed="true"]{color:#FFF;border-color:transparent}
.fgc-s.v[aria-pressed="true"]{background:var(--v)}
.fgc-s.o[aria-pressed="true"]{background:var(--a)}
.fgc-s.r[aria-pressed="true"]{background:var(--r)}
.fgc-gestes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.fgc-g{min-height:52px;border:1px solid var(--t);background:var(--f);color:var(--e);border-radius:11px;
  cursor:pointer;font:600 14px inherit;padding:8px}
.fgc-g:hover{border-color:var(--or);background:var(--orv);color:var(--or)}

/* ⑯ Le bilan en bas, discret : c'est ce qu'il veut savoir le soir en fermant, et ca ne doit
   pas encombrer sa matinee.  ⑦ Le bouton le plus frequent est en bas, la ou le pouce arrive
   sans changer la prise du telephone. */
/* ⚠️ PAS UN BLOC BLANC POSE SUR LA PAGE — Stephane (05/09), capture : « pas beau cette
   coupure ». La barre collante etait blanche (--f) sur une page blanc casse (--f2), bord net
   des deux cotes : un rectangle decoupe. Elle prend la couleur de la PAGE, opaque (elle doit
   couvrir ce qui defile dessous), et ne garde qu'un filet en haut. */
.fgc-bas{position:sticky;bottom:0;background:var(--f2);border-top:1px solid var(--t);
  padding:11px 0 14px;margin-top:16px}
.fgc-bilan{display:flex;justify-content:space-between;font-size:13px;color:var(--g);margin-bottom:10px;
  flex-wrap:wrap;gap:4px 12px}
.fgc-bilan b{color:var(--e);font-family:ui-monospace,Menlo,monospace}
.fgc-gros{width:100%;min-height:58px;border:0;border-radius:14px;background:var(--or);color:#FFF;
  font:700 16.5px inherit;cursor:pointer}
.fgc-gros:hover{filter:brightness(1.1)}

.fgc-vide{padding:26px 16px;text-align:center;color:var(--g2);border:1px dashed var(--t);
  border-radius:12px;font-size:14.5px}
.fgc-form{background:var(--f2);border:1px solid var(--t);border-radius:12px;padding:13px;margin-top:9px}
.fgc-form input,.fgc-form select{width:100%;min-height:52px;border:1px solid var(--t);border-radius:10px;
  background:var(--f);color:var(--e);padding:0 12px;font:400 16px inherit;margin-bottom:8px}
.fgc-form .duo{display:flex;gap:7px}

/* L'AGENDA EN TROIS VUES (05/09, maquette « le fil et le mois »). Le selecteur ne change que
   le haut : rien en « jour », une bande de six jours en « semaine », un mois compact en
   « mois ». Le fil reste. Les cases sont des BOUTONS de 52 px : on touche un jour, le fil
   se met dessus. Un jour passe est un simple bloc, estompe, qu'on ne peut pas viser. */
.fgc-vues{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 12px;background:var(--f3);
  border-radius:12px;padding:3px}
.fgc-vues button{appearance:none;border:0;background:transparent;color:var(--g2);font:600 14px inherit;
  min-height:44px;border-radius:9px;cursor:pointer}
.fgc-vues button[aria-pressed="true"]{background:var(--f);color:var(--e);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.fgc-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:12px}
.fgc-sj{appearance:none;border:1px solid var(--t);background:var(--f);color:var(--e);border-radius:12px;
  padding:8px 2px 7px;min-height:66px;display:flex;flex-direction:column;align-items:center;gap:1px;
  font:400 12px inherit;cursor:pointer;min-width:0}
.fgc-sj .l{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g)}
.fgc-sj b{font:700 18px ui-monospace,Menlo,monospace;line-height:1.1}
.fgc-sj .n{font-size:10.5px;color:var(--or);font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
.fgc-sj.ferme{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--f3) 5px 10px)}
.fgc-sj.ferme .n{color:var(--g)}
.fgc-sj.sel{background:var(--e);border-color:var(--e);color:var(--f)}
.fgc-sj.sel .l,.fgc-sj.sel .n{color:var(--f);opacity:.85}
.fgc-sj.auj:not(.sel){border-color:var(--or)}
.fgc-sj.passe{opacity:.4;cursor:default}
.fgc-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:12px}
.fgc-mini-t{grid-column:1/-1;font-weight:600;font-size:14px;text-transform:capitalize;padding:2px 2px 6px}
.fgc-mini .jn{text-align:center;font-size:10.5px;font-weight:600;color:var(--g);padding-bottom:2px}
.fgc-mj{appearance:none;border:1px solid transparent;background:transparent;color:var(--g2);border-radius:9px;
  aspect-ratio:1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font:500 13px ui-monospace,Menlo,monospace;cursor:pointer;padding:0}
.fgc-mj b{font-weight:500}
.fgc-mj i{width:5px;height:5px;border-radius:50%;background:var(--or)}
.fgc-mj i.att{background:var(--a)}
.fgc-mj.ferme{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--f3) 4px 8px);color:var(--g)}
.fgc-mj.sel{background:var(--e);color:var(--f)}
.fgc-mj.sel i{background:var(--f)}
.fgc-mj.auj:not(.sel){border-color:var(--or)}
.fgc-mj.passe,.fgc-mj.hors{opacity:.35;cursor:default}